モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました
Post on:2022年9月6日
sponsors
先日リリースされたChrome 105, Edge 105でコンテナクエリ（@container）と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。
そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったことがCSSでできるようになります。
Is it :modal?
by Jhey Tompkins
コンテナクエリ（@container）と:has()疑似クラスについては、先日の記事をご覧ください。
下記は各ポイントを意訳したものです。
※元サイト様のライセンスの元、翻訳しています。
:modal疑似クラスがChrome 105でサポートされました
CSSの:modal疑似クラスは、Chrome 105から利用可能です。この便利な疑似セレクタは「モーダル」な要素を選択する方法を提供し、モーダル要素を検出する方法を提供することで、JavaScriptでのクラス管理を回避することができます。
:modal疑似クラスはSafari 15.6とFirefox 103からすでにサポートされており、先日リリースされたChrome 105, Edge 105にもサポートされました。
Chrome 105のリリース情報は下記の通りです。
CSS :modal Pseudo Class -Chrome 105
:modal疑似クラスの使い方
現在、2種類の要素が:modalとして分類されています。
showModalメソッドを使用するdialog要素- フルスクリーン モードになっている要素
どのように使用すればよいのでしょうか？
下記の例では、dialog要素のうち:modalであるものすべてにスケールを設定しています。
|
1 2 3 |
dialog:modal { scale: 2; } |
下記のデモでは、dialog要素を「modal」または「non-modal」スタイルで表示します。「modal」と「non-modal」で下のコンテンツのぼかしを比較してください。
See the Pen
Modal vs Non-modal Dialog by web.dev (@web-dot-dev)
on CodePen.
「modal」バージョンをクリックすると、表示したモーダルには最上位レイヤーによって提供される::backdropが使用されます。最上位レイヤーの要素には、スタイル可能な背景要素があります。
|
1 2 3 |
dialog::backdrop { background: hsl(0 0% 10% / 0.5); } |
ただし、:backdropを持たない「non-modal」バージョンでは、::before疑似要素で偽のものを作成できます。これはより軽量で、背後のコンテンツがぼやけません。:notと組み合わせれば、「non-modal」バージョンのdialogを検出できます。
|
1 2 3 4 5 6 7 8 9 10 |
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で構成された見出し要素です。
|
1 2 3 4 5 6 7 8 9 10 |
<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の文字がアニメーションされます。
|
1 2 3 4 5 6 7 8 9 10 11 |
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%); } } |
下記のデモを見るときは、右上の「Edit on CodePen」をクリックして別タブで開くのがベストです。
See the Pen
Is it :modal? by web.dev (@web-dot-dev)
on CodePen.
Photo by Volodymyr Hryshchenko on Unsplash
sponsors
