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
アットルールを用いて固有のターゲット仕様にすることができます。
メモ: container-type
プロパティと container-name
プロパティを使用すると、 contain
プロパティの style
値と layout
値が自動的に適用されます。
構文
/* 単一の名前 */
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 の例があったとします。
<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
ページで説明されています。
.post-meta {
container-type: inline-size;
}
.post-excerpt {
container-type: inline-size;
container-name: excerpt;
}
コンテナークエリーを @container
アットルールで記述すると、クエリーが真と評価されたときにコンテナーの要素にスタイルが適用されます。
次の例では、 .post-excerpt
要素のコンテンツのみに適用するコンテナークエリーと、 .post-meta
と .post-excerpt
のコンテンツ両方に適用するコンテナークエリーの 2 つがあります。
@container excerpt (min-width: 400px) {
p {
visibility: hidden;
}
}
@container (min-width: 400px) {
p {
font-size: 2rem;
}
}
コンテナクエリーの書き方については、CSS コンテナークエリーのページを参照してください。
複数のコンテナー名の使用
コンテナーコンテキストには、スペースで区切った複数の名前を指定することもできます。
.post-meta {
container-type: inline-size;
container-name: meta card;
}
これにより、 @container
アットルールでどちらかの名前を使用してコンテナーをターゲットすることができます。
これは、複数のコンテナクエリーで同じコンテナーを対象としたい場合に有益です。
@container meta (max-width: 500px) {
p {
visibility: hidden;
}
}
@container card (max-height: 200px) {
h2 {
font-size: 1.5em;
}
}
仕様書
Specification |
---|
CSS Conditional Rules Module Level 5 # container-name |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS コンテナークエリー
- コンテナーのサイズおよびスタイルクエリーの使用
@container
アットルール- CSS
container
一括指定プロパティ - CSS
container-type
プロパティ - CSS
content-visibility
プロパティ