CSSのスタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用

サイト構築 -CSS

Post on:2022年10月27日

はじめに

CSSのコンテナクエリは「コンテナのサイズ」だけではないことをご存じですか？

W3Cの仕様では、コンテナの計算値を照会できるスタイルクエリもカバーされています。それが何を意味するのか、この記事で解説したいと思います。

CSS Containment Module Level 3

スタイルクエリはまだ策定中で、Chromeでは実験的な機能としてサポートされているだけです。今年の初頭にChromiumとWebKitに導入されたコンテナクエリの初期実装には含まれていません。

コンテナクエリとスタイルクエリの違い

CSSのコンテナクエリを使用すると、クエリコンテナのアスペクトに応じた要素のスタイルを設定できます。このクエリコンテナ（略してコンテナ）は、常に親要素となります。

サイズベースのコンテナクエリでは、コンテナのサイズに応じて子要素のスタイルを設定できます。このタイプのコンテナクエリは、ビューポートの代わりに親要素を条件にすることを除いて、@mediaクエリで解決できることと同様に機能します。

コンテナクエリ: 親要素に応じて子要素のスタイルを設定

スタイルベースのコンテナクエリ（略してスタイルクエリ）では、コンテナに適用されたスタイルを確認することができます。つまり、親要素となるコンテナのCSSのプロパティで計算された値に基づいて、条件付きで子要素にスタイルを設定できます。

この記事ではスタイルクエリのみ取りあげます。サイズベースのコンテナクエリについては、以下をご覧ください。
参考: CSS コンテナクエリの基礎知識と便利な使い方を解説

スタイルクエリの基礎知識

基本的な例として、親要素がイタリック体の場合に、iとem要素のスタイルを変更してみます。

@container style(font-style: italic) {
  i,
  em {
    background: lavender;
  }
}

@container style(font-style: italic) {

em {

background: lavender;

}

font-style: italicのマッチングは、親コンテナの計算された値に対して行われることに注目してください。

スタイルコンテナをどのように定義すればよいのか疑問に思っている場合は、その必要はありません。デフォルトで、すべての要素がスタイルコンテナです。これを手動で有効にする必要はありません。

スタイルクエリの使い方

私の同僚であるUnaのブログに、スタイルクエリの概要とその使用例についての記事があります。

私のお気に入りの使用例は、高次の変数でスタイルをグループ化し、カスタムプロパティの値に基づいて多くのCSSプロパティ値を設定することです。そうです、私が以前に取り上げた上位レベルのカスタムプロパティと同じです。

@container style(--theme: dark) {
  .card {
    background: royalblue;
    border-color: navy;
    color: white;
  }

  .card button {
    border-color: navy;
    background-color: dodgerblue;
    color: white;
  }
}

@container style(--theme: dark) {

.card {

background: royalblue;

border-color: navy;

color: white;

}

.card button {

border-color: navy;

background-color: dodgerblue;

color: white;

}

スタイルクエリのブラウザサポート

2022年10月、スタイルクエリのブラウザサポート状況は下記の通りです。

Chromium (Blink): Chromium 107+で、実験的な機能として使用できます。; 「chrome://flags/」にアクセスし、「Experimental Web Platform Features」を「Enabled」にします。
Firefox (Gecko): サポートされていません。
Safari (WebKit): サポートされていません。

この記事の執筆時点では、Experimental Web Platform Featuresのフラグを有効にした場合、Chrome 107+のみ部分的にサポートされます。この部分的なサポートは、カスタムプロパティを通じてスタイルクエリを囲むだけです。Chrome 107+を使用している場合、以下のデモでは 2つの異なるスタイルのボックスが表示され、すべて--themeカスタムプロパティの値でコントロールされます。

See the Pen
Style query test -- card themes by Una Kravets (@una)
on CodePen.

Chrome Canaryでデモページを表示すると、下記のようになります。