CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります
Post on:2022年6月20日
sponsors
これを待ち望んでいた人も多いと思います。
ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！
幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。
比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。
New syntax for range media queries in Chrome 104
by Rachel Andrew
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。
Chrome 104 メディアクエリの範囲指定の新しい構文
メディアクエリはレスポンシブデザインを可能にし、ビューポートの最小サイズと最大サイズを定義する範囲指定は、メディアクエリを採用しているWebサイトの80%で使用されています。Media Queries Level 4には、この範囲指定のための新しい構文が含まれています。
新しい構文は、Firefoxは63から、Chromeは104から利用できるようになります。この構文によってメディアクエリをどのように効率化できるかを見てみましょう。
メディアクエリの範囲指定で、比較演算子を使用できる
ビューポートの最小幅を定義する一般的なメディアクエリは、下記のように記述されます。
|
1 2 3 |
@media (min-width: 400px) { // 幅が400ピクセル以上のスタイル } |
新しい構文では、比較演算子を使用できます。
|
1 2 3 |
@media (width >= 400px) { // 幅が400ピクセル以上のスタイル } |
続いて、最大幅で見てましょう。
今までの一般的なメディアクエリは、下記のように記述されます。
|
1 2 3 |
@media (max-width: 30em) { // 幅が30em以上のスタイル } |
新しい構文で、比較演算子を使用すると下記の通りです。
|
1 2 3 |
@media (width <= 30em) { // 幅が30em以上のスタイル } |
比較演算子は、2つの幅を定義する時により効率化されます。
たとえば、最小幅400px、最大幅600pxのビューポートの場合、今までは下記のように記述していました。
|
1 2 3 |
@media (min-width: 400px) and (max-width: 600px) { // 400px〜600pxのスタイル } |
これは、新しい構文で下記のように記述できます。
widthが2つの値の間にあることに注目してください。
|
1 2 3 |
@media (400px <= width <= 600px ) { // 400px〜600pxのスタイル } |
メディアクエリの冗長性を減らすだけでなく、この新しい構文には正確さという利点もあります。min-とmax-クエリには、定義された値が含まれます。つまり、min-width: 400pxは、400pxを含む以上ということです。新しい構文の比較演算子を使用すると、意味をより明確にし、クエリの衝突する可能性を回避することもできます。
【訳者注】
Media Queries Level 4によると、不等号（<, >）のみにも対応しています。
|
1 2 3 |
@media (400px < width < 600px ) { // 401px〜599pxのスタイル } |
widthは、400pxにも600pxにも等しくないです。
サポートされていないブラウザを考慮するために、スタイルシート内で新しい構文を古い構文に書き換えるPostCSS Media Minmaxが用意されています。
サポートされていないブラウザ用に、新しい構文を古い構文に書き換える
sponsors
