是 :modal 吗?

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

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

浏览器支持

  • Chrome:105。
  • 边缘:105。
  • Firefox:103.
  • Safari: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%);
 
}
}