@container
Baseline 2023
Newly available
Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
@container
は CSS のアットルールで、コンテナーコンテキストにスタイルを適用する条件付きグループルールです。
スタイル宣言は条件によってフィルタリングされ、条件が真の場合にコンテナーに適用されます。
この条件は、コンテナーのサイズまたは <style-feature>
の値が変更されたときに評価されます。
container-name
プロパティは、クエリーコンテナーの名前の一覧を指定します。これらの名前は、対象となるクエリーコンテナーをフィルターするために、@container
ルールで使用することができます。オプションで、大文字と小文字を区別する <container-name>
は、クエリーによって対象となるクエリーコンテナーをフィルタリングします。
要素に対して適格なクエリーコンテナーが選択されると、<container-condition>
の各コンテナー機能はそのクエリーコンテナーに対して評価されます。
構文
@container
アットルールは以下の構文です。
@container <container-condition> { <stylesheet> }
例えば次のようなります。
@container (width > 400px) {
h2 {
font-size: 1.5em;
}
}
/* オプションの <container-name> 付き */
@container tall (height > 30rem) {
h2 {
line-height: 1.6;
}
}
値
<container-condition>
-
オプションの
<container-name>
および<container-query>
。条件が真の場合、この<stylesheet>
で定義されたスタイルが適用されます。<container-name>
-
オプション。クエリーが真と評価された際にスタイルが適用されるコンテナーの名前を、
<ident>
として指定します。 <container-query>
-
コンテナーのサイズが変更された際に、クエリーコンテナーに対して評価される一連の特性を指定します。
<stylesheet>
-
一連の CSS 宣言です。
コンテナークエリー内の論理キーワード
論理キーワードを使用してコンテナー条件を定義することができます。
and
は 2 つ以上の条件を結合します。or
は 2 つ以上の条件を結合します。not
は条件を否定します。コンテナークエリーあたり 1 つの 'not' 条件だけが許されており、and
またはor
キーワードと同時に使用することはできません。
@container (width > 400px) and (height > 400px) {
/* <stylesheet> */
}
@container (width > 400px) or (height > 400px) {
/* <stylesheet> */
}
@container not (width < 400px) {
/* <stylesheet> */
}
名前付きコンテナーコンテキスト
コンテナーコンテキストには、 container-name
プロパティを使用して名前を付けることができます。
.post {
container-name: sidebar;
container-type: inline-size;
}
このために使用する一括指定構文は container
であり、 container: <name> / <type>
という形式です。例えばこのようにします。
.post {
container: sidebar / inline-size;
}
コンテナークエリーでは、 container-name
プロパティを使用して、クエリーコンテナー名と一致するコンテナー集合にフィルタリングします。
@container sidebar (width > 400px) {
/* <stylesheet> */
}
使用法や名前の制約の詳細は container-name
ページで説明しています。
記述子
以下の記述子は、コンテナー条件内で使用することができます。
aspect-ratio
-
コンテナーの
aspect-ratio
は、<ratio>
値として発生したコンテナーの高さに対する幅として計算されます。 block-size
-
コンテナーの
block-size
を<length>
値で表したものです。 height
-
コンテナーの高さを
<length>
値で表現したものです。 inline-size
-
コンテナーの
inline-size
を<length>
値で表したものです。 orientation
-
コンテナーの方向で、
landscape
またはportrait
のいずれかです。 width
-
コンテナーの幅を
<length>
値で表したものです。
例
コンテナーの大きさに基づいたスタイルの設定
タイトルとテキストを持つカード部品の次の例を考えてみましょう。
<div class="post">
<div class="card">
<h2>カードのタイトル</h2>
<p>カードのコンテンツ</p>
</div>
</div>
コンテナーコンテキストは container-type
プロパティを使用して作成することができます。この用途では .post
クラスの inline-size
値を使用します。
そして、 @container
アットルールを使用することで、 .card
クラスの要素に、 650px
より狭いコンテナー内でスタイルを適用することができます。
/* インラインサイズに基づくコンテナーコンテキスト */
.post {
container-type: inline-size;
}
/* コンテナーが 650px よりも狭かった場合にスタイルを適用 */
@container (width < 650px) {
.card {
width: 50%;
background-color: gray;
font-size: 1em;
}
}
名前付きコンテナーコンテキストの作成
タイトルとテキストを持つカード部品である次の HTML 例があったとします。
<div class="post">
<div class="card">
<h2>カードのタイトル</h2>
<p>カードのコンテンツ</p>
</div>
</div>
まず、 container-type
および container-name
プロパティを用いてコンテナーコンテキストを作成します。
この宣言の一括指定構文は container
ページで説明しています。
.post {
container-type: inline-size;
container-name: summary;
}
次に、コンテナークエリーに名前を追加して、そのコンテナーを対象とします。
@container summary (min-width: 400px) {
.card {
font-size: 1.5em;
}
}
入れ子のコンテナークエリー
単一のコンテナークエリーで複数のコンテナーを対象とすることはできません。 同じ効果を持つコンテナークエリーを入れ子にすることは可能です。
以下は、 summary
という名前のコンテナーが 400px
よりも幅が広く、かつ祖先に 800px
よりも幅の広いコンテナーがある場合に、宣言されたスタイルを適用するクエリーです。
@container summary (min-width: 400px) {
@container (min-width: 800px) {
/* <stylesheet> */
}
}
コンテナースタイルクエリー
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
コンテナークエリーは、対象のコンテナー要素のスタイルを計算して評価することもできます。コンテナースタイルクエリーは、1 つ以上の style()
関数記法を使用する @container
クエリーです。 論理値の構文と、スタイル機能をスタイルクエリーに結合するロジックは、CSS 機能クエリー と同じです。
@container style(<style-feature>),
not style(<style-feature>),
style(<style-feature>) and style(<style-feature>),
style(<style-feature>) or style(<style-feature>) {
/* <stylesheet> */
}
それぞれの style()
の引数は、単一の <style-feature>
です。 <style-feature>
は、有効な CSS 宣言、CSS プロパティ、<custom-property-name>
のいずれかです。
@container style(--themeBackground),
not style(background-color: red),
style(color: green) and style(background-color: transparent),
style(--themeColor: blue) or style(--themeColor: purple) {
/* <stylesheet> */
}
値のないスタイル特性は、指定されたプロパティの初期値と計算された値が異なる場合、真と評価されます。
style()
関数の引数として渡した <style-feature>
が宣言である場合、スタイルクエリーは、宣言の値がクエリー対象のコンテナのそのプロパティの計算値と同じであれば真と評価されます。 そうでない場合は、偽と評価されます。
以下のコンテナークエリーは、コンテナー要素の --accent-color
の計算値
が blue
かどうかを調べます。
@container style(--accent-color: blue) {
/* <stylesheet> */
}
メモ:
カスタムプロパティが blue
という値を持つ場合、そのプロパティが @property
で色として定義されていない限り、同等の 16 進コード #0000ff
は一致しません。
個別指定プロパティを照会するスタイルの特性クエリは、計算された値が各プロパティで一致する場合は真となり、一致しない場合は偽となります。例えば、@container style(border: 2px solid red)
は、その短縮形を構成する 12 個の個別指定プロパティ(border-bottom-style
など)がすべて真であれば真になります。
グローバルな revert
と revert-layer
は <style-feature>
の値としては不正なため、コンテナースタイルクエリーは偽になります。
仕様書
Specification |
---|
CSS Conditional Rules Module Level 5 # container-rule |
ブラウザーの互換性
BCD tables only load in the browser