Range syntax for style queries

概要

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

対応ブラウザ

基本構文

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

実務での使いどころ

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — Range syntax for style queries