コンテナスタイルクエリとは、祖先要素のスタイルに基づいて子孫要素のスタイルを定義できる機能です。例えば、祖先要素の「背景色が黒色のとき」や「文字色が赤色のとき」に子孫要素のスタイルを自由に定義できます。
似た用語でコンテナサイズクエリと呼ばれる機能があります。こちらは、祖先要素のサイズに基づいて子孫要素のスタイルを定義できます。コンテナサイズクエリについてはこちらの記事をご覧ください↓
使い方
サイズクエリを使用するときはcontainer-typeを指定する必要がありましたが、スタイルクエリを使用するときは必要ありません。
全ての要素がデフォルトでスタイルクエリを使用できる状態です。
Unless otherwise noted, all elements are query containers for the purpose container queries that do no require explicit containment (such as container style queries), reagardless of the specified container-type.
4.1. Creating Query Containers: the container-type property
サイズクエリとの違いは、スタイルの条件を定義するときにstyle()を使用する点です。
通常の例
具体的な例を見てみます。以下のようなHTMLを用意しました↓
<div class="ancestor">
<div class="parent">
<div class="child">child</div>
</div>
</div>class属性childを持つdiv要素(以後childと表記)から見て祖先に当たる要素を基準としてスタイルを定義していきます。
例えば、「class属性parentを持つdiv要素(以後parentと表記)の--textSizeがlarge」のときスタイルを定義する場合以下のように記述します↓
<style>
.parent {
--textSize:large;
}
@container style(--textSize:large) {
.child {
font-size:120px;
}
}
</style>
<div class="ancestor">
<div class="parent">
<div class="child">child</div>
</div>
</div>直接の親ではない要素(今回の場合、class属性ancestorを持つdiv要素(以後、ancestorと表記))に対してもスタイルクエリは有効です↓
<style>
.ancestor {
--textSize:large;
}
@container style(--textSize:large) {
.child {
font-size:120px;
}
}
</style>
<div class="ancestor">
<div class="parent">
<div class="child">child</div>
</div>
</div>container-nameを使用する
通常の例で用意したindex.htmlをそのまま流用します。
ancestorとparentの両方に異なる--textSizeの値が指定されていた場合どうなるでしょうか？
それは、childから見て直近の親要素であるparentの--textSizeの値が優先されます↓
<style>
.ancestor {
--textSize: large;
}
.parent {
--textSize: small;
}
@container style(--textSize:large) {
/*parentのtextSizeがsmallのため、この条件は無効です*/
.child {
font-size: 120px;
}
}
</style>
<div class="ancestor">
<div class="parent">
<div class="child">child</div>
</div>
</div>ancestorをchildのスタイルクエリしたい場合は、container-nameを使用します↓
<style>
.ancestor {
--textSize: large;
container-name:large;
}
.parent {
--textSize: small;
}
@container large style(--textSize:large) {
/*childのスタイルクエリはancestorであるためこの条件は有効です*/
.child {
font-size: 120px;
}
}
</style>
<div class="ancestor">
<div class="parent">
<div class="child">child</div>
</div>
</div>注意点
カスタムプロパティにのみ対応
2023年4月17日現在では、カスタムプロパティによるスタイル定義のみ対応しています。
「background-colorが#fffのとき」や「font-sizeが24pxのとき」などの条件は今のところ適用されません。
Adds the
Style Container Queries for CSS Custom Propertiesstyle()function to@containerrules to make it possible to apply styles based on the computed values of custom properties of an ancestor element.
ショートハンドプロパティも使用できる
@container style(margin:40px) {...}のように指定することができます。この場合、margin-top、margin-right、margin-bottom、margin-leftの値全てが40pxのとき条件が有効になります。
Style features that query a shorthand property are true if the computed values match for each of its longhand properties, and false otherwise.
5.2. Style Container Features
revertやrevert-layerは使用できない
revertやrevert-layerなどは、スタイルクエリの値として使用できません。
その他のグローバルな値initial、inherit、unsetは使用できます。
Cascade-dependent keywords, such as revert and revert-layer, are invalid as values in a style feature, and cause the container style query to be false.
Note: The remaining non-cascade-dependent CSS-wide keywords are computed with respect to the query container, the same as other values.
5.2. Style Container Features
実際の使用例(Twitterより)
Twitterでスタイルクエリの使用例が紹介されていました。
のうめんさん↓
久保さん↓
Ahmad Shadeedさん↓
ブラウザ対応状況
2023年4月17日現在ではChrome111〜とEdge111〜のみ対応で、カスタムプロパティのみ機能します。
参考サイト
