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 の一括指定プロパティで、この要素をクエリーコンテナーとして確立し、コンテナークエリーで使用されるコンテナーコンテキストの名前を指定します。

構成要素のプロパティ

このプロパティは、以下の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

ブラウザーの互換性

BCD tables only load in the browser

関連情報