1995年にWindows95とともにデビューし、2007年までブラウザ市場の50%以上を独占するなど一斉を風靡したInternet Explorerが、2022年6月15日、最終バージョン「Internet Explorer 11（IE11）」のサポート終了となり歴史の幕を下ろしました（ブラウザの歴史については過去記事にまとめています）。
IE11のサポート終了によって、ブラウザの後方互換性を気にしなくなくても良いシーンが増えるため、今後より一層ブラウザの表現力が上がっていくことが予想されます。それに伴い開発者にとってはCSSの新機能を使う機会が増えていきそうです。すでにChrome / Safari / FireFox / Edge / Brave / Operaなど大半のブラウザで使えるようになっているCSS新機能がいくつかありますので、ざっとみていきたいと思います。
CSSコンテナクエリ
CSSコンテナクエリは、従来のメディアクエリがビューポートのサイズに追従していたのとは異なり、自分の親要素（コンテナ）のサイズに対してスタイルを適用します。
子要素がウェブページのどこにあっても、その親セレクタにスタイリング情報を問い合わせるため、レスポンシブ対応が容易になりました。
See the Pen
Container size queries by Eystein Mack Alnaes (@eystein)
on CodePen.
記事執筆（2022年9月15日）時点ではFirefoxとOperaではまだ使えません。
参照: CSS Container Query Units | caniuse
:has() 擬似クラス
CSSの :has() 擬似クラスは、親要素が特定の要素やクラスを持つ子要素を含んでいるかどうかをチェックします。CSSは今までは子要素の有無をチェックすることができなかったため、このような実装にはJSを使う必要がありました。これは大きな進化ですね！
See the Pen
:has – CSS Grid columns demo by Matthias Ott (@matthiasott)
on CodePen.
記事執筆（2022年9月15日）時点ではFirefoxとOperaではまだ使えません。
参照: :has() CSS relational pseudo-class | caniuse
さらに、Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性という大きめのバグが発見され、本稿執筆時点では修正されていません。:has() 擬似クラスは待望されていた機能ですが、まだ使うのは控えたほうがよさそうです。
:modal 擬似クラス
:modal 擬似クラスもモーダル要素をJSを使わずCSSだけで実現する新機能です。背景のスタイルングも可能です。
See the Pen
Modal vs Non-modal Dialog by web.dev (@web-dot-dev)
on CodePen.
https://cpwebassets.codepen.io/assets/embed/ei.js
この :modal 疑似クラスと :has() を組み合わせればいろいろ面白いことができそうです。たとえば、ポップアップやダイアログの表示中に背景要素のスクロールを防ぐ実装は下記のシンプルなコードで実現します。
.body{
&:has(:modal){
overflow: hidden;
}
}
記事執筆（2022年9月15日）時点ではOperaはまだ使えません。
参照: CSS selector: :modal | caniuse
本稿執筆時点でのブラウザのシェアをBrowser Market Share Japan (Aug 2021 – Aug 2022)で確認するとサポート終了したIEはわずか1.06%のシェアです。これは予想以上に少ないような…今までは敬遠していたCSS新機能を使った実装を取り入れみるのにはいいタイミングかもしれません。
