Poppin’ In

Avatar of Geoff Graham
Geoff Graham 发布

DigitalOcean 提供适用于旅程各个阶段的云产品。 立即开始使用 价值 200 美元的免费积分!

哦,你好! 有一段时间没见了,对吧? 想进来打个招呼。 👋

说到“弹出”,我一直都在玩 Popover API。 我们实际上早在 2018 年就注意到了它,当时 Chris 链接了一些关于 <dialog> 元素的信息。 但直到今年 4 月,我们才终于 在现代浏览器中获得了完整的 Popover API 支持

曾经有一段时间,我们将在 HTML 中获得一个全新的 <popover> 元素。 Chromium 最近 在 2021 年 9 月 仍在进行开发,但最终 放弃了 <popover> 元素,转而使用 popover 属性。 考虑到任何元素都可以是弹出窗口,这似乎是最合理的做法,我们只需要将其附加到属性以启用它。

<div popover>
  <!-- Stuff -->
</div>

这很有趣,因为假设我们有一些简单的元素用作弹出窗口

<div>👋</div>

如果这是我们拥有的所有标记,并且我们在 CSS 中没有任何操作,那么挥手表情符号将按预期显示。

但是,将 popover 属性添加到其中,它就消失了!

这可能是我感到困惑的第一件事。 大多数时候,东西会消失,我会假设自己做错了。 但是打开 DevTools 显示这正是应该发生的事情。

DevTools inspector showing the computed values for an element with the popover attribute.
元素默认情况下设置为 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 还有很多我仍在努力理解的内容,但即使我玩过的这些小东西也感觉很有用。 我会列出我收藏的书签,以便将来回来查看。 但是现在,感谢您让我弹出回来,跟您打个招呼。