CSSのスタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用
Post on:2022年10月27日
Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素(コンテナ)のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。
たとえば、下記は右のカードの親要素に特定のスタイルが設定されており、それに応じて子要素のスタイルが適用されています。
Container Queries: Style Queries
by Bramus
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
CSSのコンテナクエリは「コンテナのサイズ」だけではないことをご存じですか?
W3Cの仕様では、コンテナの計算値を照会できるスタイルクエリもカバーされています。それが何を意味するのか、この記事で解説したいと思います。
CSS Containment Module Level 3
スタイルクエリはまだ策定中で、Chromeでは実験的な機能としてサポートされているだけです。今年の初頭にChromiumとWebKitに導入されたコンテナクエリの初期実装には含まれていません。
コンテナクエリとスタイルクエリの違い
CSSのコンテナクエリを使用すると、クエリコンテナのアスペクトに応じた要素のスタイルを設定できます。このクエリコンテナ(略してコンテナ)は、常に親要素となります。
サイズベースのコンテナクエリでは、コンテナのサイズに応じて子要素のスタイルを設定できます。このタイプのコンテナクエリは、ビューポートの代わりに親要素を条件にすることを除いて、@media
クエリで解決できることと同様に機能します。
コンテナクエリ: 親要素に応じて子要素のスタイルを設定
スタイルベースのコンテナクエリ(略してスタイルクエリ)では、コンテナに適用されたスタイルを確認することができます。つまり、親要素となるコンテナのCSSのプロパティで計算された値に基づいて、条件付きで子要素にスタイルを設定できます。
この記事ではスタイルクエリのみ取りあげます。サイズベースのコンテナクエリについては、以下をご覧ください。
参考: CSS コンテナクエリの基礎知識と便利な使い方を解説
スタイルクエリの基礎知識
基本的な例として、親要素がイタリック体の場合に、i
とem
要素のスタイルを変更してみます。
1 2 3 4 5 6 |
@container style(font-style: italic) { i, em { background: lavender; } } |
font-style: italic
のマッチングは、親コンテナの計算された値に対して行われることに注目してください。
スタイルコンテナをどのように定義すればよいのか疑問に思っている場合は、その必要はありません。デフォルトで、すべての要素がスタイルコンテナです。これを手動で有効にする必要はありません。
スタイルクエリの使い方
私の同僚であるUnaのブログに、スタイルクエリの概要とその使用例についての記事があります。
私のお気に入りの使用例は、高次の変数でスタイルをグループ化し、カスタムプロパティの値に基づいて多くのCSSプロパティ値を設定することです。そうです、私が以前に取り上げた上位レベルのカスタムプロパティと同じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@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でデモページを表示すると、下記のようになります。
デモページをChrome Canaryで表示
ブラウザのサポートに関する最新情報を入手するには、以下をご覧ください。
- Blink/Chromium: Issue #1302630
- WebKit/Safari: Issue #246605
- Gecko/Firefox: Issue #1795622
スタイルクエリのリソース
この記事を書いている時点では、見つけられるリソースはそれほど多くありませんが、いくつかあります。
sponsors