container-name

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-name は CSS のプロパティで、コンテナークエリーにおいて @container アットルールで使用されるクエリーコンテナー名のリストを指定します。 コンテナークエリーでは、格納コンテキストを持つ最も近い祖先のサイズに基づいて要素にスタイルが適用されます。 コンテナーのコンテキストの名前が指定されたとき、コンテナーのコンテキストのある最も近い祖先の代わりに @container アットルールを用いて固有のターゲット仕様にすることができます。

構文

css
/* 単一の名前 */
container-name: myLayout;

/* 複数の名前 */
container-name: myPageLayout myComponentLibrary;

/* グローバル値 */
container-name: inherit;
container-name: initial;
container-name: revert;
container-name: revert-layer;
container-name: unset;

値

<container-name>

コンテナーを識別するために使用する、大文字と小文字を区別する文字列です。

以下の条件が適用されます。

  • 名前は有効な <custom-ident> であれば何でもかまいませんが、default と等しくあってはいけません。
  • 名前の値は引用符で囲んではいけません。
  • 作者が定義する識別子（例：--container-name`）を意図するダッシュ記号は許可されています。
  • スペースで区切られた複数の名前のリストが許可されます。

公式定義

初期値none
適用対象すべての要素
継承なし
計算値none または識別子の順序付きリスト
アニメーションの種類アニメーション不可

形式文法

container-name = 
  none             |
  <custom-ident>+

例

コンテナー名の使用

タイトルとテキストを持つカード部品である、次の HTML の例があったとします。

html
<div class="card">
  <div class="post-meta">
    <h2>カードのタイトル</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>

格納コンテキストを作成するには、 CSS で要素に container-type プロパティを追加します。 次の例では、カードのメタ情報用と投稿の抜粋用の 2 つのコンテナーを作成しています。

メモ: これらの宣言のための一括指定構文は container ページで説明されています。

css
.post-meta {
  container-type: inline-size;
}

.post-excerpt {
  container-type: inline-size;
  container-name: excerpt;
}

コンテナークエリーを @container アットルールで記述すると、クエリーが真と評価されたときにコンテナーの要素にスタイルが適用されます。 次の例では、 .post-excerpt 要素のコンテンツのみに適用するコンテナークエリーと、 .post-meta と .post-excerpt のコンテンツ両方に適用するコンテナークエリーの 2 つがあります。

css
@container excerpt (min-width: 400px) {
  p {
    visibility: hidden;
  }
}

@container (min-width: 400px) {
  p {
    font-size: 2rem;
  }
}

コンテナクエリーの書き方については、CSS コンテナークエリーのページを参照してください。

複数のコンテナー名の使用

コンテナーコンテキストには、スペースで区切った複数の名前を指定することもできます。

css
.post-meta {
  container-type: inline-size;
  container-name: meta card;
}

これにより、 @container アットルールでどちらかの名前を使用してコンテナーをターゲットすることができます。 これは、複数のコンテナクエリーで同じコンテナーを対象としたい場合に有益です。

css
@container meta (max-width: 500px) {
  p {
    visibility: hidden;
  }
}

@container card (max-height: 200px) {
  h2 {
    font-size: 1.5em;
  }
}

仕様書

Specification
CSS Containment Module Level 3
# container-name

ブラウザーの互換性

BCD tables only load in the browser

関連情報