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

Range syntax for style queries

スタイルクエリの範囲構文により、カスタムプロパティの値を比較演算子で条件指定できます。正確な値の一致だけでなく、値の大小関係に基づくスタイル適用が可能になります。動的なデザインシステムやテーマ切り替えにおいて、より柔軟な条件分岐を実現します。

コンテナクエリ条件分岐

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
style queries for custom properties range syntax
実験的
142
142
142
CSS タイプ
style range syntax
実験的

スタイルクエリの範囲構文
142
142
142
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
@container style(--priority > 3) {
  .item {
    font-weight: bold;
    color: red;
  }
}

ライブデモ

priority > 3 (高)

CSS の priority > 3 (高) パターンです。

プレビュー全画面表示

priority = 3 (中)

CSS の priority = 3 (中) パターンです。

プレビュー全画面表示

priority < 3 (低)

CSS の priority < 3 (低) パターンです。

プレビュー全画面表示

実務での使いどころ

  • 優先度ベースのスタイリング

    カスタムプロパティの数値に基づいて、しきい値を超えた場合に異なるスタイルを適用します。

注意点

  • 現時点ではブラウザサポートが非常に限定的であり、プロダクション環境での使用は時期尚早です。

アクセシビリティ

  • スタイルの条件分岐がコンテンツの意味に影響しないよう、装飾的な変更に限定して使用することを推奨します。

参考リンク