Container style queries
コンテナのCSSカスタムプロパティ（CSS変数）の値を条件にして、子要素のスタイルを切り替えられます。テーマの切り替え（ダーク/ライト）、状態に基づくスタイリング、コンポーネントのバリエーション制御などに活用できます。サイズベースのコンテナクエリと異なり、任意の状態に基づいたスタイル適用が可能です。
概要
コンテナのCSSカスタムプロパティ（CSS変数）の値を条件にして、子要素のスタイルを切り替えられます。テーマの切り替え（ダーク/ライト）、状態に基づくスタイリング、コンポーネントのバリエーション制御などに活用できます。サイズベースのコンテナクエリと異なり、任意の状態に基づいたスタイル適用が可能です。
対応ブラウザ
デスクトップ
Chrome 111+
Edge 111+
Safari 18+
Firefox 未対応
モバイル
Chrome Android 111+
Safari iOS 18+
Firefox Android 未対応
基本構文
CSS
.theme-container {
--theme: dark;
}
@container style(--theme: dark) {
.card {
background: #1e1e1e;
color: #fff;
}
}実務での使いどころ
-
テーマに基づくコンポーネントスタイリング
親コンテナのCSS変数を条件にして、子コンポーネントのテーマ（ダーク/ライト）を自動的に切り替えられます。
注意点
- 現在はカスタムプロパティの値のみクエリ可能で、標準CSSプロパティ（color、font-size等）のクエリはまだサポートされていません。Firefoxでは未サポートです。
アクセシビリティ
- テーマ切り替え機能を実装する場合、ユーザーのシステム設定（prefers-color-scheme）を尊重し、手動切り替えのオプションも提供してください。