CSS的未来：Popover API

WBOLT_COM 5 月 30, 2023 916 0

CSS的未来：Popover API

在这篇文章中，我们要看的不是一个而是两个即将出现在CSS中的令人兴奋的新东西，第一个是Popover API。虽然我认为它本身很好，但当它与锚点定位搭配使用时，我们能做的事情就非常非常酷了。在写这篇文章的时候，这两个功能都只在非稳定的浏览器中可用。

什么是Popover API？

Popover API是一个强大的工具，为开发人员提供了一个一致和灵活的方式来显示网页上的弹出式内容。无论你喜欢声明性的HTML属性还是JavaScript控制，这个API都能满足你的需求。

在网络上，在其他内容的顶部呈现内容是很常见的，如果你愿意的话，在top-layer，以引起用户对重要信息或行动的注意。你可能已经遇到了各种术语，如弹出式窗口或对话框。

HTML属性

popover
- auto (default) – 这意味着当点击外部或按下esc时，弹出窗口可以被解散，同时其他弹出窗口也会为这个新的弹出窗口关闭。
- manual – 当手动时，弹出窗口只能被手动关闭（使用JS或HTML关闭动作）。
popovertarget
- [id] – 这个属性可以放在一个 button 上，让它控制一个弹出窗口，该属性的值应该是目标的 id 。
popovertargetaction
- toggle (default) – 按下带有 popovertarget 的 button 将对弹出窗口执行该动作。在这种情况下，如果隐藏，弹出窗口将显示，如果显示，则隐藏。
- hide – 设置 popovertarget 为显示无。
- show – 设置 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() – 更新popover元素并将其移至显示状态。
PopoverElement.togglePopover() – 更新popover元素并在其隐藏和显示状态之间切换。

事件

beforetoggle – 视觉上发生状态变化之前触发的事件。
toggle – 视觉上发生状态变化后触发的事件。

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.
});

Demo

这是一个简单的对话框演示，我选择在这个例子中不包含任何JavaScript，只是为了展示它可以真正的简单化。

如果你的浏览器还不支持 popover ，这里有一个后备GIF。

简单的对话框演示动画

什么是锚点定位？

锚点定位还没有在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%);
}

你会注意到这个新的 anchor CSS函数。它接受一个CSS变量和一个位置，然后返回位置，你甚至可以在一个 calc 中使用这个值来做更复杂的位置。