[CSS] メディアクエリで比較演算子が使用可能に

Media Queries Level 4では、メディアクエリの構文が拡張され、範囲指定に比較演算子（>=, <=, <, >）が使用できるようになりました。
この新しい記法により、従来のmin-widthやmax-widthといった書き方よりも、直感的で簡潔な記述が可能です。

対応ブラウザ

Chrome ：104以上
Edge　 ：104以上
Safari ：16.4以上
Firefox：63以上

 

対応状況の詳細は、以下のリンクから確認できます
Media Queries: Range Syntax | Can I use…

CSS メディアクエリで使用可能な比較演算子

演算子	意味
<=	以下
<	未満
>=	以上
>	より大きい

記述方法

・従来のメディアクエリ

・比較演算子を使用したメディアクエリ

 

比較演算子は、andなどの論理演算子と組み合わせて複数の条件を指定することも可能です。

・従来の複合条件での範囲指定

 

・比較演算子を使用した複合条件での範囲指定

範囲指定の正しい記述順

比較演算子を使う場合、条件を左から右に論理的に読み進める形で記述する必要があります。

・正しい記述例

768pxがwidthより小さいか等しい(768px <= width)、かつ widthが1200px以下(width <= 1200px)である

 

・間違いのある記述例

この記述だと、768pxがwidth以上という条件が最初に来るため、文法的に矛盾しています。
また、widthに関しては比較演算子の順序が不自然となり、正しく解釈されません。

 

上記のように比較演算子を使うことで、より読みやすく、直感的なコードが書けるようになります。
ただし、新しい記法は便利ですが、古いブラウザではサポートされていない場合があります。
必要に応じて従来のmin-widthやmax-widthを併用する方法を検討しましょう。