CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる

CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。

簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像(.visual)が含まれている場合のスタイル、.card:not(:has(.visual))で含まれていない場合のスタイルを定義できます。

下記は、カードに画像が含まれている場合は見出しのfont-sizeを小さく、含まれていない場合は大きくしています。

CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる

Simple CQ Demo with :has()

先日リリースされたSafari 15.4で、:has()疑似クラスがサポートされました。Chromeは次期101のflagsで使用できる予定(Canaryはすでに使用できます)で、すべてのブラウザにサポートされる日が近づいてきました。また、コンテナクエリはすでにChrome 93のflagsで使用でき、SafariのTPにも実装され、こちらもサポートされる日が近づいてきました。

Safari 15.4は、macOS Montereyだと自動アップデートされますが、それ以外だと自動アップデートされません。ソフトウェアアップデートのmacOS Montereyから「ほかにもアップデートがあります」の詳しい情報からアップデートできます。

まず、CSSのコンテナクエリと:has()疑似クラスを簡単に説明します。

コンテナクエリとは
コンテナクエリは@mediaクエリに似ていますが、ビューポートではなく親コンテナのサイズに対してスタイルを適用できます。
:has()疑似クラスとは
:has()は指定した要素を含んでいる場合にスタイルを適用できます。

さらに詳しくは、下記をご覧ください。

:has()疑似クラスは2022年4月現在サポートされているブラウザはSafariのみですが、ポリフィルを使用すればすべてのモダンブラウザで使用できます。

デモがどのように機能するのか、見てましょう。
2つのカードがあり、1つ目は画像あり、2つ目は画像なし、です。画像がある場合にはfont-sizeが小さくなり、ない場合にはfont-sizeが大きなくります。

サイトのキャプチャ

コンテナが400px以上の場合

さらに、コンテナクエリを使用してコンテナの幅が400px未満になると、画像がある場合には積み重なり、画像がない場合には積み重ねはなしです。

サイトのキャプチャ

コンテナが400px未満の場合

CSSは、下記の通りです。
画像のあり・なしは.card:has(.visual), .card:not(:has(.visual))で記述されています。

コンテナクエリと:has()擬似クラスは、Chrome Canaryの最新版でflagsをオンにすると、動作します。

Chromeのキャプチャ

アドレスバーにchrome://flags/を入力して、上記の2つを有効にします。

実際のデモは、下記でご覧ください。
Chrome Canary, Safari TPで動作します。

See the Pen
Simple CQ Demo with :has()
by Una Kravets (@una)
on CodePen.

元ネタのツイートは、下記より。

sponsors

top of page

©2022 coliss