CSS Reference

container-type

クエリコンテナを宣言する

container-type プロパティは、要素を、@container 規則で使用されるクエリコンテナとして宣言します。

指定できる値は下記の通りです。

size インライン軸、ブロック軸の両方に対してコンテナサイズクエリのためのクエリコンテナを確立します。要素の主要ボックスに、レイアウト、スタイル、サイズの封じ込めを適用します。
inline-size インライン軸に対してコンテナサイズクエリのためのクエリコンテナを確立します。要素の主要ボックスに、レイアウト、スタイル、インラインサイズの封じ込めを適用します。
normal コンテナサイズクエリのためのクエリコンテナを確立しません。ただし、要素はコンテナスタイルクエリのためのクエリコンテナであることに変わりはありません。（既定値）

つまり、container-type: normal; の状態では、下記のような指定をしても、クエリコンテナの「サイズ」に応じた変化は起こりません。

/* CSS */
.example {
  container-name: example;
  container-type: normal;
}

@container example (width <= 150px) {
  div {
    background-color: blue;
  }
}

しかし、スタイルクエリは適用されるため、下記の指定は有効です。

/* CSS */
.example {
  container-name: example;
  container-type: normal;
}

@container example style(--responsive: true) {
  div {
    background-color: blue;
  }
}

container-typeの仕様

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

主要ブラウザの対応

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