哦,你好! 有一段时间没见了,对吧? 想进来打个招呼。 👋
说到“弹出”,我一直都在玩 Popover API。 我们实际上早在 2018 年就注意到了它,当时 Chris 链接了一些关于 <dialog>
元素的信息。 但直到今年 4 月,我们才终于 在现代浏览器中获得了完整的 Popover API 支持。
曾经有一段时间,我们将在 HTML 中获得一个全新的 <popover>
元素。 Chromium 最近 在 2021 年 9 月 仍在进行开发,但最终 放弃了 <popover>
元素,转而使用 popover
属性。 考虑到任何元素都可以是弹出窗口,这似乎是最合理的做法,我们只需要将其附加到属性以启用它。
<div popover>
<!-- Stuff -->
</div>
这很有趣,因为假设我们有一些简单的元素用作弹出窗口
<div>👋</div>
如果这是我们拥有的所有标记,并且我们在 CSS 中没有任何操作,那么挥手表情符号将按预期显示。
但是,将 popover
属性添加到其中,它就消失了!
这可能是我感到困惑的第一件事。 大多数时候,东西会消失,我会假设自己做错了。 但是打开 DevTools 显示这正是应该发生的事情。

display: none
。页面上可能有多个弹出窗口,我们可以使用 ID 将它们区分开来。
<div popover id="tooltip">
<!-- Stuff -->
</div>
<div popover id="notification">
<!-- Stuff -->
</div>
这还不够,因为我们还需要某种“触发器”来让弹出窗口,嗯,弹出! 我们得到了另一个属性,它可以将任何按钮(或 <input>
风格的按钮)变成触发器。
<button popovertarget="wave">Say Hello!</button>
<div popover id="wave">👋</div>
现在我们有一个“针对” <button>
的 popover
。 单击按钮时,弹出窗口元素会切换可见性。
这就是事情变得真正有趣的地方,因为现在 CSS 能够处理切换可见性的逻辑,我们可以更多地关注单击发生时的行为。
比如,现在,表情符号在切换打开时由一个非常粗的黑边框包围。 这是一个默认样式。

除了应用的边框之外,DevTools 中还发生了其他一些值得注意的事情。 例如,请注意,计算的宽度和高度的行为更像内联元素而不是块元素,即使我们正在使用一个普通的 <div>
——即使元素显然被计算为 display: block
。 相反,我们得到的是一个根据其内容进行大小调整并放置在页面正中心的元素。 我们甚至还没有添加一行 CSS 代码!
说到 CSS,让我们回到删除默认边框。 你可能会认为可以通过在元素上声明没有边框来实现。
/* Nope 👎 */
#wave {
border: 0;
}
实际上,有一个 :popover-open
伪类专门在元素处于“打开”状态时选择元素。 我希望它被称为 :popover-popped
,但我还是说错了。 重要的是,:popover-open
仅在弹出窗口元素打开时匹配弹出窗口元素,这意味着这些样式是在元素选择器上声明的样式之后应用的,从而覆盖了它们。
另一种方法? 选择 [popover]
属性
/* Select all popovers on the page */
[popover] {
border: 0;
}
/* Select a specific popover: */
#wave[popover] {
border: 0;
}
/* Same as: */
#wave:popover-open {
border: 0;
}
考虑到这一点,我们可以,比如,在 #wave
的打开状态下附加一个动画。 我完全从 Jhey 的一个演示 中获得这个想法。
等等,还有更多! 如果需要,弹出窗口可以像带有 ::backdrop
的 <dialog>
一样。 ::backdrop
伪元素可以通过将其设置为特殊背景或遮挡后面的元素来让弹出窗口更加引人注目。
我喜欢 Mojtaba 在年鉴中为我们提供的这个示例,所以我们就用它吧。
你能想象所有可能性吗? 比如,现在 CSS 抽象了可见性逻辑,创建工具提示会变得多么容易? 容易得多,容易得多。
Michelle Barker 指出,这可能不像传统的“工具提示”那样在悬停时切换可见性,而是一个由点击控制的“切换提示”。 这很有道理。 但我提到 Michelle 的文章的真正原因是她演示了 Popover API 如何很好地与 CSS 锚点定位 协同工作,因为它获得了更广泛的浏览器支持。 这将有助于清除我的演示中用于定位的 神奇数字。
这是 Jhey 的另一个宝石:弹出窗口不必是弹出窗口。 为什么不将 Popover API 用于其他依赖于切换可见性的 UI 元素,比如一个滑出菜单?
哦,天哪,看看:时间不早了。 Popover API 还有很多我仍在努力理解的内容,但即使我玩过的这些小东西也感觉很有用。 我会列出我收藏的书签,以便将来回来查看。 但是现在,感谢您让我弹出回来,跟您打个招呼。
- 关于弹出窗口的可访问性:浏览器会做什么和不会做什么(Hidde de Vries)
- 如果您正在使用弹出窗口,也请使用对话框元素作为您的模态对话框 📺(Hidde de Vries)
- 开放式 UI 和 Popover API(Brecht De Ruyte)
- 关于弹出窗口和对话框的简短说明(Adrian Roselli)
- 使用 Selectmenu 和锚点 API 进行高级表单控件样式设置(Brecht De Ruyte)
- 使用 Popover API 创建 HTML 工具提示(Chris Coyier)
- 比较 Popover API 和
<dialog>
元素(LogRocket)
弹出窗口真棒! 另外,很高兴看到这个网站回来了——它是一个很棒的资源。
我目前在跟进最新进展方面落后了一些,所以直到现在才听说过这个(很奇怪,因为 Michelle Barker 的网站在我的 RSS 订阅中)。
将其用于菜单的演示非常非常令人兴奋,我显然需要进行更多研究。 有一天能够创建不依赖 JavaScript 的网站导航组件将是一个梦想成真; 不再需要使用
no-script
元素和备用样式,仅仅是为了确保子菜单在 JS 无法加载时可用,而且在 JS 加载时不会出现布局偏移。 这是性能、可靠性和可访问性的胜利吗?