【CSS】modal 擬似クラスが主要なブラウザで使えるようになったので試した。

概要

:modal 擬似クラスが主要なブラウザで使用できるようになったので、試してみた。

環境

macOS: Monterey
ver: 12.3.1

---

所感

今まで JavaScript 等で modal は対応していたが、:modal 擬似クラスが主要ブラウザで対応したので、便利になればと思い試してみた。（あまり調べてないのでいまいちうまく扱えなかった...）

使い方

2 種類の要素が使用可能

• showModal メソッドを使用する dialog 要素
• フルスクリーン モードになっている要素

今回、showModal メソッドを使用する dialog 要素の方のみ試した。
おおよそはコードを見ていただければ分かるかと思いますので割愛。（正直今までと、労力はあまり変わらないような..?）

See the Pen Untitled by Yuto Maeda (@yuto_hyrax) on CodePen.

次はコンテナクエリと:has疑似クラスも試してみようかなと。

参考

• mdn web docs