@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.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
@container
は CSS のアットルールで、格納コンテキスト にスタイルを適用する条件付きグループルールです。
スタイル宣言は条件によってフィルタリングされ、条件が真の場合にコンテナーに適用されます。
この条件は、コンテナーのサイズが変わったときに評価されます。
オプションで大文字小文字を区別する container-name
を指定することができ、これによって考慮するクエリーコンテナーの集合を、クエリーコンテナー名が一致するものだけにフィルタリングすることができます。
要素に対して適格なクエリーコンテナが選択されると、<container-condition>
の各コンテナー機能はそのクエリーコンテナーに対して評価されます。
構文
@container
アットルールは以下の構文です。
@container <container-condition> { <stylesheet> }
例えば次のようなります。
@container (width > 400px) {
h2 {
font-size: 1.5em;
}
}
値
<container-condition>
-
コンテナーのサイズが変更されたときに、コンテナーに対して評価される特性の集合です。
<stylesheet>
で定義したスタイルは、この条件が真であれば適用されます。 <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> */
}
}
スタイルのコンテナークエリー
仕様書
Specification |
---|
CSS Containment Module Level 3 # container-rule |
ブラウザーの互換性
BCD tables only load in the browser