この便利な 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%);
}
}