モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました

先日リリースされたChrome 105, Edge 105でコンテナクエリ(@container)と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。

そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったことがCSSでできるようになります。

モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」

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であるものすべてにスケールを設定しています。

下記のデモでは、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が使用されます。最上位レイヤーの要素には、スタイル可能な背景要素があります。

ただし、:backdropを持たない「non-modal」バージョンでは、::before疑似要素で偽のものを作成できます。これはより軽量で、背後のコンテンツがぼやけません。:notと組み合わせれば、「non-modal」バージョンのdialogを検出できます。

また、これはフルスクリーン モードになっている要素でも機能します。下記は、spanで構成された見出し要素です。

要素がフルスクリーン モードの場合、各spanの文字がアニメーションされます。

下記のデモを見るときは、右上の「Edit on CodePen」をクリックして別タブで開くのがベストです。

See the Pen
Is it :modal?
by web.dev (@web-dot-dev)
on CodePen.

Photo by Volodymyr Hryshchenko on Unsplash

sponsors

top of page

©2022 coliss