在这篇文章中，我们将要查看CSS的两个新事物，而是两个新的令人兴奋的事情，第一个是Popover API。虽然我认为与Anchor positioning配对时，我们可以用它可以做的事情很棒。在写作时，这两个功能仅在非稳定浏览器中可用。
什么是弹出式API？
POPOVER API是一个强大的工具，对于开发人员，它提供了一种一致且灵活的方式，可以在网页上显示弹出内容。无论您喜欢声明性的HTML属性还是JavaScript控件，此API都可以覆盖您。
在网络上，如果可以的话，在top-layer上以其他内容的顶部显示内容非常普遍，以吸引用户注意重要信息或动作。您可能已经遇到了各种术语，例如弹出式或对话框。
HTML属性
-
popover
- auto （默认） - 这意味着在单击外部或按ESC时可以忽略弹出窗口，此新弹出案也将关闭。
- 手册 - 当手动时，只能用手动解散弹出窗口（使用JS或HTML近距离动作）。
-
popovertarget
-
[id] - 可以将此属性放在
button上以控制弹出声，属性的值应为目标的id。
-
[id] - 可以将此属性放在
-
popovertargetaction
-
toggle （默认） - 用
popovertarget按button将对弹出案执行此操作。在这种情况下 -
hide - 将
popovertarget设置为无。 -
显示 - 将
popovertarget设置为显示块。
-
toggle （默认） - 用
<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伪元素和课程
- ::背景 - 这是一个伪元素，它填充了弹出窗口后面的整个屏幕，造型可以使您更改颜色甚至添加模糊。
- ：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真是可惜。
控件
- popoverlement.hidepopover（） - 更新弹出元件并将其移至隐藏状态。
- popoverlement.showpopover（） - 更新弹出元件并将其移至显示的状态。
- popoverlement.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%);
}
您会注意到此新的anchor CSS功能。它需要CSS变量和一个位置，然后返回位置，您甚至可以在calc中使用该值来执行更复杂的位置。
演示
这是一些演示，显示了工具提示的创建，目的是简单化，只是显示一个简单的实现。
，这是一个后备GIF
我们如何一起使用这些？
Web已经存在了很长时间，并且完全向后兼容，这很棒，但确实导致了一些问题，例如无法自定义select Combobox组件。我敢肯定，你们中的许多人在从头开始编写新的组合以匹配特定设计或找到其他人已经制造但失去了一些自定义能力之间的困境。
将Popover和Anchor Position组合在一起，我认为我们可能能够制作出一个漂亮的结合蛋白，我们可以构建自己喜欢的样子，而不必担心可访问性和定位问题。让我们看看我们是否可以做。
我们在可访问性方面做什么？
在W3C上有一个可爱的人建立的网站，该网站遍及所有aria patterns，用于包括combobox的各种不同用例。我将仔细研究一下本机select元素的作用。
我知道Aria Patterns网站已经启动了一段时间，但是我不能强调它有多惊人和有用，我觉得这是一个最好的保密秘密，但每个人都应该使用它。
演示
所以我们最后是演示。我将弹出式API和锚定位放在一起，以制作一个可以使我们心中满足的组合。
我不得不使用一些JS来确保其键盘友好并确保按钮更新中的文本，如果您有任何方法的想法，我们可以使用较少的JS来做这些我喜欢的事情听到他们。
最后一个后备GIF，希望有一天我们都可以回顾这篇文章，看看一切正常。
鳍
这是一个包装，弹出式API应该相对较快地开始降落在稳定的浏览器中，但是锚定位可能需要更长的时间。话虽这么说，这确实是成为Web开发人员的激动人心的时刻。现在已经解决了许多以前需要黑客解决方法的任务，从而使我们腾出了探索更多创意的可能性！