Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。積極的に採用してよい。

Container Queries

container は CSS の一括指定プロパティで、この要素をクエリーコンテナーとして確立し、コンテナークエリーで使用されるコンテナーコンテキストの名前を指定します。

レスポンシブコンポーネント

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
container
105
105
110
16
105
16
DOM API
CSSContainerRule

CSSContainerRule インターフェイスは、単一の CSS の @container ルールを表します。
105
105
110
16
105
16
containerName

containerName は CSSContainerRule インターフェイスの読み取り専用プロパティで、関連づけられた CSS の @container のコンテナー名を表します。
111
111
110
17
111
17
containerQuery

containerQuery は CSSContainerRule インターフェイスの読み取り専用プロパティで、コンテナーのサイズが変わったときに、関連する @container のスタイル設定が適用されるかどうかを判断するために評価されるコンテナー条件を表す文字列を返します。
111
111
110
17
111
17
その他
css.at-rules.container

@container は CSS のアットルールで、コンテナーコンテキストにスタイルを適用する条件付きグループルールです。 スタイル宣言は条件によってフィルタリングされ、条件が真の場合にコンテナーに適用されます。 この条件は、クエリーされたコンテナーのサイズ、、スクロール状態のいずれかが変化したときに評価されます。
105
105
110
16
105
16
css.properties.container-name

container-name は CSS のプロパティで、 @container アットルールによるコンテナークエリーで使用されるクエリーコンテナー名のリストを指定します。 コンテナークエリーは、コンテナーコンテキストを持つ最も近い祖先のサイズまたはスクロール状態に基づいて、要素にスタイルを適用します。 コンテナーコンテキストの名前が指定されたとき、コンテナーコンテキストのある最も近い祖先の代わりに、 @container アットルールを用いて固有のターゲットを指定することができます。
105
105
110
16
105
16
CSS プロパティ
none
105
105
110
16
105
16
その他
css.properties.container-type

要素はクエリーコンテナーを確立するのに、 container-type という CSS プロパティを使用することができます。 container-type は、コンテナークエリーで使用されるコンテナーコンテキストの種類を定義するために使用されます。利用できるコンテナーコンテキストは次のとおりです。
105
105
110
16
105
16
CSS プロパティ
inline-size
105
105
110
16
105
16
normal
105
105
110
16
105
16
size
105
105
110
16
105
16
CSS タイプ
container query length units

コンテナクエリの長​​さの単位 `cqw`、`cqh`、`cqi`、`cqb`、`cqmin`、`cqmax`
105
105
110
16
105
16
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

ライブデモ

Narrow container

Container Queries Narrowcontainer demo.

プレビュー全画面表示

Wide container

Container Queries Widecontainer demo.

プレビュー全画面表示

containernamespecified

Container Queries containernamespecified demo.

プレビュー全画面表示

実務での使いどころ

  • 再利用可能なカードコンポーネント

    サイドバーでは縦積み、メインエリアでは横並びと、置かれた場所に応じてレイアウトが変わる真の意味での再利用可能コンポーネント。

  • ウィジェットの自律的なレスポンシブ

    ダッシュボードのウィジェットが自分のコンテナ幅に応じてレイアウトを切り替える。

注意点

  • container-type を指定した要素自身はコンテナクエリの対象にならない。子要素のスタイルにのみ適用できる。
  • 容量の大きいレイアウト変更を多用すると再描画コストが増える可能性がある。

フォールバック戦略

CSS 
@supports not (container-type: inline-size) {
  @media (min-width: 400px) {
    .card { display: flex; }
  }
}

アクセシビリティ

  • レイアウト変更によって読み上げ順が変わらないよう、HTML の DOM 順序はそのままに CSS で視覚的な並びを制御する。

参考リンク