Chromeのバージョンが105になったのでCSSの:has()とContainer queriesが使えるようになった #CSS

この記事の概要

Google Chromeのバージョンが105になりました。
変更内容はいくつかありますが、私が興味を持っているのはCSSにおける:has()とContainer queriesが使用可能になったことです。

それぞれの機能について軽く触れつつ、今後の適用を考えてみます。

両方をチェックできるものをCodePenで作成しました。

上段が:has()について、下段がContainer queriesについてです。

See the Pen Chrome 105 check by Keisuke Watanuki (@xrxoxcxox) on CodePen.

CSSを書いていて「特定のクラスが付いた要素を子に持つ要素だけスタイルを変えたい」という場面はそれなりにあると思います。
先ほどのCodePenでは、img要素を子に持つクラスだけ背景色と文字色を変えていました。¹

ある種、if-else的な考えでスタイルを切り替えられるので今後よく使われていくと思います。

ただ、現状はChromeとSafariしか対応していません。
FirefoxとEdgeでの実装が待たれますが、ポリフィルがあるので今のうちに慣れておくのも手ではないでしょうか。
ポリフィルを試してみた記事は以下です。

レスポンシブ実装などにおいて、Media queriesでスタイルを実現するのって大変ではありませんか？
画面幅がどうというより、描画されている要素の幅がいくつなのかをトリガーにしてレイアウトを変えたいですよね。

それを叶えてくれるのがContainer queriesです。

先ほどのCodePenでは要素の幅が800px以下になったら背景色が変わるようにしています。
こういった書き方ができるおかげで、コンポーネントにレイアウト違いのスタイルを持たせるのも現実的になると思います。

こちらは更に対応ブラウザが限られているので、利用は先になってしまいそうですが、ポリフィルはあります。
試してみた記事は以下です。

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！