CSS Reference

container-name

クエリコンテナに名前を付ける

container-name プロパティは、@container 規則で使用されるクエリコンテナの名前を指定します。空白で区切って複数の名前を指定することも可能です。また、none キーワードを指定することができますが、これは名前がないことを指定します。

指定した名前は、@container 規則が、どのクエリコンテナをターゲットにするかをフィルタするために利用可能です。

container-nameの仕様

初期値
  • none
対象となる要素
  • すべての要素
継承
  • なし

container-nameのサンプルソース

main {
  container-type: size;
  container-name: my-page-layout;
}

.my-component {
  container-type: inline-size;
  container-name: my-component-library;
}

@container my-page-layout (block-size > 12em) {
  .card { margin-block: 2em; }
}

@container my-component-library (inline-size > 30em) {
  .card { margin-inline: 2em; }
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome