CSS 的未来：Popover API

在这篇文章中，我们将探讨 CSS 即将推出的两项激动人心的新功能，其中一项是Popover API 。虽然我认为它本身就很棒，但将其与Anchor 定位结合使用时，效果会更加酷炫。在撰写本文时，这两个功能仅在非稳定浏览器中可用。

什么是 Popover API？

Popover API 是一款功能强大的开发者工具，它提供了一种一致且灵活的方式在网页上显示弹出框内容。无论您喜欢声明式 HTML 属性还是 JavaScript 控件，此 API 都能满足您的需求。

在网络上，将内容呈现在其他内容之上（也可以称为顶层）的做法很常见，目的是吸引用户注意重要的信息或操作。你可能见过各种各样的术语来描述这种情况，例如弹出窗口或对话框。

HTML 属性

• 弹出窗口
  • 自动（默认） - 这意味着当单击外部或按 esc 时可以关闭弹出窗口，并且其他弹出窗口也会为这个新弹出窗口关闭。
  • 手动- 手动时，只能通过手动（使用 JS 或 HTML 关闭操作）关闭弹出窗口。
• 弹出目标
  • [id] - 可以将此属性放在 上button以允许它控制弹出窗口，该属性的值应该是id目标的 。
• 弹出目标动作
  • 切换（默认）- 同时按下 abutton和 apopovertarget将在弹出窗口上执行此操作。在这种情况下，如果弹出窗口隐藏，则显示；如果弹出窗口显示，则隐藏。
  • 隐藏-设置popovertarget为不显示。
  • 显示-设置popovertarget为显示块。

<button popovertarget="menu" popovertargetaction="toggle">Menu</button>
<nav id="menu" popover="auto">
  <ul>
    <li><a href="/items/1">Item 1</a></li>
    <li><a href="/items/1">Item 2</a></li>
    <li><a href="/items/1">Item 3</a></li>
  </ul>
</nav>

CSS伪元素和类

• ::backdrop - 这是一个伪元素，它填充了弹出窗口后面的整个屏幕，通过设置其样式可以让你改变颜色甚至添加模糊。
• :popover-open - 这是一个伪类，它在打开时应用于弹出元素，我们可以使用它来添加打开动画。

#menu {
  border: 0;
  margin-right: 0;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  max-width: 100vw;
  width: 200px;
  height: 100%;
}

#menu ul {
  list-style: none;
  padding: 0;
}

#menu ul li {
  padding: 1ch;
}

#menu::backdrop {
  background-color: rgba(200, 200, 200, 0.5);
  backdrop-filter: blur(2px);
}

#menu:popover-open {
  animation: slideIn 150ms ease-in-out;
}

@keyframes slideIn {
  0% {
    translate: 100% 0 0;
  }
  100% {
    translate: 0 0 0;
  }
}

JavaScript 控件和事件

我知道这篇文章主要讲述 CSS 中令人兴奋的新事物，但如果不谈论 JS 那就太可惜了。

控件

• PopoverElement.hidePopover() - 更新弹出元素并将其移至隐藏状态。
• PopoverElement.showPopover() - 更新弹出元素并将其移动到显示状态。
• PopoverElement.togglePopover() - 更新弹出元素并在其隐藏和显示状态之间切换。

活动

• beforetoggle - 在状态发生视觉变化之前触发的事件。
• 切换-状态发生视觉变化后触发的事件。

const popover = document.querySelector('#menu[popover]');

popover.addEventListener('beforetoggle', () => {
  // I triggered first before anything visually happened.
});

popover.addEventListener('toggle', () => {
  // I triggered after the toggle had happened visually.
});

演示

这是一个对话框的简单演示，我选择不在此示例中包含任何 JavaScript，只是为了展示它实际上有多么简单。

如果您的浏览器尚不支持，这里有一个后备 gif popover。

动图

什么是锚定位？

锚点定位功能目前尚未收录到 MDN 中，所以这还只是一些实验性的功能。我会尽力解释它的功能以及如何使用。

目前，如果您希望一个元素在另一个元素的物理渲染位置相邻，最简单的方法是使用 JavaScript 确定目标元素的位置，然后将锚定元素设置为绝对位置，并设置其顶部、右侧、底部或左侧属性。这种方法有效，但“JavaScript 越少越好”™ 的原则是，锚定允许您将元素的位置存储在 CSS 变量中。

#anchor {
  anchor-name: --test-anchor;
}

.anchored-element {
  position: absolute;
  right: anchor(--test-anchor left);
  top: anchor(--test-anchor center);
  transform: translateY(-50%);
}

你会注意到这个新的anchorCSS 函数。它接受一个 CSS 变量和一个位置参数，然后返回位置值。你甚至可以使用该值来calc实现更复杂的位置操作。

演示

这里有一个小演示，再次展示了工具提示的创建，其目的是简单化并仅展示一个简单的实现。

再次，这里有一个后备 gif，因为我确信锚点仍然还有一段距离。

动图

我们如何才能一起使用它们？

Web 已经存在很长时间了，并且完全向后兼容，这很棒，但也会导致一些问题，例如无法自定义select组合框组件。我相信你们很多人都遇到过这样的困境：要么从头编写一个新的组合框来匹配特定的设计，要么找一个别人已经写好的，但却失去了一些自定义功能。

综合起来Popover，Anchor Position我觉得我们或许可以做出一个美观的组合框，让它看起来更符合我们的喜好，而且不用担心可访问性和定位问题。我们试试看能不能做到。

我们对无障碍设施做了哪些改进？

W3C的一群好心人创建了一个网站，里面详细介绍了所有aria 模式在各种不同用例中的用法，包括组合框。我会仔细研究这个网站，同时也看看原生select元素的作用。

我知道 aria 模式网站已经上线有一段时间了，但我无法强调它有多么神奇和有用，我觉得它有点像一个最好保守的秘密，但每个人都应该使用它。

演示

好了，终于到了演示版。我整合了 Popover API 和 Anchor 定位，制作了一个可以随心所欲设置样式的组合框。

我不得不使用一些 JS 来确保它对键盘友好，并确保按钮中的文本更新，如果你们有想法可以使用更少的 JS 来做这些事情，我很乐意听到。

最后一张后备 gif，希望有一天我们都能回顾这篇文章并看到一切正常。

动图

鳍

好了，Popover API 应该很快就会在稳定的浏览器中上线，但 Anchor 定位可能需要更长时间。话虽如此，对于 Web 开发者来说，这确实是一个激动人心的时刻。许多以前需要一些 hack 式变通才能解决的任务现在都得到了解决，让我们可以自由地探索更多创造性的可能性！

非常感谢你的阅读。如果你想在 Dev 之外联系我，可以点击我的Twitter和LinkedIn来打个招呼😊。