container
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年2月.
container は CSS の一括指定プロパティで、この要素をクエリーコンテナーとして確立し、コンテナークエリーで使用されるコンテナーコンテキストの名前を指定します。
構成要素のプロパティ
このプロパティは、以下の CSS プロパティの一括指定です。
構文
css
/* <container-name> */ container: my-layout; /* <container-name> / <container-type> */ container: my-layout / size; /* グローバル値 */ container: inherit; container: initial; container: revert; container: revert-layer; container: unset; 値
<container-name>-
コンテナーコンテキストの大文字小文字を区別した名前です。 構文の詳細は、
container-nameプロパティのページにあります。 <container-type>-
コンテナーコンテキストの種類です。 構文の詳細は、
container-typeプロパティのページにあります。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして
|
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
container =
<'container-name'> [ / <'container-type'> ]?
<container-name> =
none |
<custom-ident>+
<container-type> =
normal |
[ [ size | inline-size ] || scroll-state ]
例
インラインサイズ抑制の確立
以下の HTML の例があったとします。これは画像、タイトル、いくつかのテキストによるカード部品です。
html
<div class="post"> <div class="card"> <h2>カードのタイトル</h2> <p>カードのコンテンツ</p> </div> </div> コンテナーコンテキストを作成する明示的な方法は、 container-name をオプションとして container-type を宣言することです。
css
.post { container-type: inline-size; container-name: sidebar; } container の一括指定は、これを単一の宣言で定義しやすくするためのものです。
css
.post { container: sidebar / inline-size; } そして、 @container アットルールを用いて、そのコンテナーの名前をターゲットにすることができます。
css
@container sidebar (min-width: 400px) { /* <stylesheet> */ } 仕様書
| Specification |
|---|
| CSS Conditional Rules Module Level 5 # container-shorthand |
ブラウザーの互換性
関連情報
- CSS コンテナークエリー
- コンテナーのサイズおよびスタイルクエリーの使用
@containerアットルール- CSS
contain一括指定プロパティ - CSS
container-typeプロパティ - CSS
container-nameプロパティ - CSS
content-visibilityプロパティ