poppin＆＃039;在

嘿！长时间看不到！ 只是想进来打个招呼。 ？

说到“弹出”，我一直在尝试新的Popover API。 我们首先在2018年提到它，但是现代浏览器中的全部支持仅是最近的（2024年4月）。

最初，计划了专用的属性取代。这是有道理的，因为任何元素现在都可以用作弹出窗口 - 只需添加属性。 <popover></popover>popover ```html

<code>
Here's an interesting observation: a simple element like this:

```html
<div>?</div></code>

...正常显示。 但是，添加popover属性将其隐藏起来！ 最初，这使我感到困惑，但DevTools确认这是预期的行为。

可以通过IDS区分多个弹出声：

需要一个“触发器”来激活弹出声。 另一个属性将任何按钮（或类似按钮的元素）转换为此触发器：>

<div popover="id1"></div>
<div popover="id2"></div>

>单击按钮可切换弹出窗口的可见性。 CSS处理可见性逻辑，使我们可以专注于点击事件。 例如，当弹出窗口打开时，较厚的黑色边框是默认样式。

DevTools揭示了其他有趣的细节：即使使用

<button>Say Hello!</button>
<div popover="">?</div>

，弹出窗口的宽度和高度也像在线元素一样。它的大小适用于内容，并以中心为中心，所有这些都没有自定义CSS！

>

>删除默认边框不如

那么简单。 display: blockpseudo-class样式元素

border: 0;在打开时，覆盖早期样式。 或者，选择:popover-open属性：>

这允许将动画添加到开放状态（灵感来自Jhey的演示）。 此外，对于视觉效果，弹出案可以包括A

的伪元素，类似于[popover]>。 Mojtaba的年鉴示例非常好。

/* All popovers */
[popover] { border: 0; }

/* Specific popover */
#wave[popover] { border: 0; }

/* Equivalent to :popover-open */
#wave:popover-open { border: 0; }

可能性很大！ CSS处理可见性变得更加简单。 米歇尔·巴克（Michelle Barker）指出，这更像是一个“ toggletip”（点击控制），而不是悬停工具提示，她的帖子​​显示了它与CSS锚定位（随着支持的增长）的整合程度。 Jhey是另一个很棒的资源，强调了弹出案不仅限于弹出案。它可以用于具有可见性的其他UI元素，例如滑出菜单。

。

>已经很晚了，还有更多的探索，但是即使是最初的尝试也很有希望。 以下是进一步学习的资源列表：

::backdrop <dialog></dialog>popover可访问性：浏览器行为（hidde de vries）

使用

>和

用于模态（hidde de vries）

打开UI和popover api（brecht de ruyte）

高级形式控制样式（Brecht de ruyte）

HTML工具提示（Chris coyier）

popover API >

比较popover api和popover（logrocket）<dialog></dialog>>

感谢您让我弹出！

>

以上是poppin＆＃039;在的详细内容。更多信息请关注PHP中文网其他相关文章！