それは :modal でしょうか。

この便利な CSS 疑似セレクタを使用すると、モーダル モードの要素を選択できます。

Jhey Tompkins

この便利な疑似セレクタを使用すると、「モーダル」要素を選択できます。また、モーダル要素を検出する方法を提供することで、JavaScript でクラスを管理する必要がなくなります。

現在、次の 2 種類の要素が :modal として分類されています。

• showModal メソッドを使用したダイアログ要素。
• 全画面モードの要素。

どのように使用できますか？この例では、:modal であるすべての <dialog> 要素のスケールを設定します。

dialog:modal {
 scale: 2;
}

<dialog> を「モーダル」または「非モーダル」のいずれかのスタイルで表示できるデモについて考えてみましょう。

「モーダル」バージョンを表示する場合、最上位レイヤが提供する ::backdrop が使用されます。

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

しかし、::backdrop を持たない非モーダル バージョンの場合は、::before 疑似要素を使用して架空のバージョンが作成されます。明るく、後ろのコンテンツがぼやけません。: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);
}

これは、全画面モードの要素にも適用されます。スパンで作られたこの見出し要素について考えてみましょう。

<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>

要素が全画面モードになると、スパンがアニメーション化されます。

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