container-type

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.

* Some parts of this feature may have varying levels of support.

要素は、コンテナーサイズの問い合わせのためのクエリーコンテナーとして、 container-type という CSS プロパティを使用して確立することができます。 container-type は、コンテナークエリーで使用するサイズ格納方法の種類を定義するために使用します。

これはコンテナークエリーで無限ループを避けるために重要です。もしそうでなければ、コンテナークエリーの中にある CSS ルールがコンテンツサイズを変更する可能性があり、その結果、クエリーが偽に評価されて親要素のサイズが変更され、そして、コンテンツサイズが変更されてクエリーが真に戻る、といった動作になります。

コンテナーサイズは、明示的に、あるいはコンテキストによって設定されます。例えば、ブロック要素、フレックスコンテナー、グリッドコンテナーは、親の幅いっぱいに伸びます。明示的またはコンテキストによるサイズが利用できない場合、サイズ抑制のある要素は折りたたまれます。

構文

css
/* キーワード値 */
container-type: normal;
container-type: size;
container-type: inline-size;

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

size

インラインおよびブロックの両方の寸法で コンテナーサイズクエリーのためのクエリー コンテナーを確立します。 コンテナーにレイアウト抑制、スタイル抑制、サイズ抑制を適用します。

サイズ抑制は、インライン方向とブロック方向の両方で要素に適用されます。要素のサイズは、子要素を無視して単独で計算できます。

inline-size

コンテナーのインライン軸上の寸法クエリー用のクエリーコンテナーを確立します。 要素にレイアウト、スタイル、インラインサイズ抑制を適用します。

インラインサイズ抑制が要素に適用されます。要素のインラインサイズは、子要素を無視して単独で計算されます。

normal

この要素はコンテナーサイズクエリーのクエリーコンテナーではありませんが、コンテナースタイルクエリーのクエリーコンテナーであることに変わりはありません。

公式定義

初期値normal
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類

形式文法

container-type = 
normal |
[ [ size | inline-size ] || scroll-state ]

インラインサイズ抑制の確立

次の HTML 例は、画像、タイトル、テキストを持つカード部品があります。

html
<div class="container">
  <div class="card">
    <h3>Normal card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

コンテナーコンテキストを作成するには、要素に container-type プロパティを追加します。以下は、 inline-size 値を使用してコンテナーのインライン軸のコンテナーコンテキストを作成しています。

css
.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}

コンテナークエリーを @container アットルールで書くと、コンテナーの横幅が 400px を超える場合に、コンテナーの要素にスタイルが適用されます。

css
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

仕様書

Specification
CSS Conditional Rules Module Level 5
# container-type

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
container-type
inline-size
normal
scroll-state
Experimental
size

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

関連情報