Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

Container style queries

コンテナのCSSカスタムプロパティ（CSS変数）の値を条件にして、子要素のスタイルを切り替えられます。テーマの切り替え（ダーク/ライト）、状態に基づくスタイリング、コンポーネントのバリエーション制御などに活用できます。サイズベースのコンテナクエリと異なり、任意の状態に基づいたスタイル適用が可能です。

コンテナクエリカスタムプロパティ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.container.style_queries_for_custom_properties
111
111
Preview
18
111
18
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実装メモ
  • ドキュメント要素をコンテナにすることはできません。 バグ 271040 を参照してください。
注釈 1件
実装メモ
  • ドキュメント要素をコンテナにすることはできません。 バグ 271040 を参照してください。

基本構文

CSS 
.theme-container {
  --theme: dark;
}
@container style(--theme: dark) {
  .card {
    background: #1e1e1e;
    color: #fff;
  }
}

ライブデモ

--theme: dark

CSS --theme: dark demo.

プレビュー全画面表示

--theme: light

CSS --theme: light demo.

プレビュー全画面表示

--variant: accent

CSS --variant: accent demo.

プレビュー全画面表示

実務での使いどころ

  • テーマに基づくコンポーネントスタイリング

    親コンテナのCSS変数を条件にして、子コンポーネントのテーマ（ダーク/ライト）を自動的に切り替えられます。

注意点

  • 現在はカスタムプロパティの値のみクエリ可能で、標準CSSプロパティ（color、font-size等）のクエリはまだサポートされていません。Firefoxでは未サポートです。

アクセシビリティ

  • テーマ切り替え機能を実装する場合、ユーザーのシステム設定（prefers-color-scheme）を尊重し、手動切り替えのオプションも提供してください。

参考リンク