是 :modal 吗？

借助这个实用的 CSS 伪选择器，您可以选择模态元素。

Jhey Tompkins

庆祝：此 Web 功能现已在三大主要浏览器引擎中推出！

借助这个实用的伪类选择器，您可以选择“模态”元素，并通过提供检测模态元素的方法来避免在 JavaScript 中管理类。

浏览器支持

• 105
• 105
• 103
• 15.6

来源

目前，有两种类型的元素被归类为 :modal：

• 使用 showModal 方法的对话框元素。
• 处于全屏模式的元素。

如何使用它？此示例设置了所有为 :modal 的 <dialog> 元素的缩放比例。

dialog:modal {
 scale: 2;
}

请考虑以下演示，您可以在“模态”或“非模态”样式中显示 <dialog>。

当您显示“模态”版本时，它会使用顶层提供的 ::backdrop。

注意 ：顶层元素具有可设置样式的背景幕元素。

dialog::backdrop {
 background: hsl(0 0% 10% / 0.5);
}

不过，对于没有 ::backdrop 的非模态版本，系统会使用 ::before 伪元素创建一个虚构的 ::backdrop。它更轻盈，不会使背后的内容模糊不清。您可以将其与 :not 组合使用，以检测非模态 <dialog>。

dialog[open]:not(:modal)::before {
  content: "";
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 50%;
  left: 50%;
  background: hsl(0 0% 10% / 0.25);
  transform: translate3d(-50%, -50%, -1px);
}

这也适用于处于全屏模式的元素。假设这个标题元素由 span 组成。

<header>
  <h1>
    <span style="--index: 0;">:</span>
    <span style="--index: 1;">m</span>
    <span style="--index: 2;">o</span>
    <span style="--index: 3;">d</span>
    <span style="--index: 4;">a</span>
    <span style="--index: 5;">l</span>
 </h1>
</header>

当元素处于全屏模式时，span 将会呈现动画效果。

h1 span {
 animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
}
header:modal span {
  --speed: 0.75;
}
@keyframes jump {
  50% {
    transform: translateY(-50%);
  }
}