CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります

これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！ 幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。 比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New syntax for range media queries in Chrome 104 by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。 Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリの範囲指定で、比較演算子を使用できる Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリはレ

[coliss]

CSSのメディアクエリで比較演算子（>=, <=）を使用できるようになります。

[hotmilkcocoa]

Safari はまだだった > https://caniuse.com/mdn-css_at-rules_media_range_syntax

[mizdra]

分かりやすくてうれしい

[spark7]

「400px < width < 600px」Python風やね

[shinagaki]

小数点のバグ動作があったから、これが普及すればわかりやすくなる

[yarumato]

「不等号だけ」はCSSで既に > が「子セレクタ」（子要素にスタイルを適用する）に使われてるから無さそう、と思ったが、 https://www.w3.org/TR/mediaqueries-4/#mq-range-context 見ると < も > もあるみたい。

[gyochan]

未満や超過（不等号だけ・イコールなし）も使えるといいんだけど言及がないな。

[Shinwiki]

よく考えてから出せよクソが

[yamadar]

ちょっと見やすくなるな

[kawaosa]

@media