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

先日リリースされたChrome 105, Edge 105でコンテナクエリ（@container）と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。 そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったことがCSSでできるようになります。 Is it :modal? by Jhey Tompkins コンテナクエリ（@container）と:has()疑似クラスについては、先日の記事をご覧ください。 レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 :modal疑似クラスがCh

[coliss]

コンテナクエリ（@container）と:has()疑似クラスに続いて、:modal疑似クラスもサポートされました。

[shields-pikes]

スマホもPCも含めて全ブラウザで対応したのかな。確かに、画像の拡大とかの定番のモーダル表示くらいならJavaScript使わなくても良さそうなもんだ、という気持ちはあった。

[for-my-internet-demo]

覚えとこうかなぁ

[cpw]

Css

[spark7]

confirmみたいな本気のモーダル機能にならんのかね。

[kagioo2uma]

開閉メニューに応用できそう？