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

Range syntax for style queries

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

コンテナクエリ条件分岐

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.container.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 (high)

CSS Priority > 3 (high) demo.

プレビュー全画面表示

Priority = 3 (middle)

CSS Priority = 3 (middle) demo.

プレビュー全画面表示

Priority < 3 (low)

CSS Priority < 3 (low) demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク