比較演算子が使用可能になる

レスポンシブデザインを実装する時、CSSにてメディアクエリーを使用してスタイリングすることが主流だと思います。

例えば、「ビューポートが768px以下の時にある要素の高さを50vhにしたい」としましょう。これまでは以下のように実装していました。

style.css

@media (max-width: 768px) {
  .box {
    height: 50vh;
  }
}

逆に、ビューポートが768px以上の時のデザインはmin-widthとすることで実装できます。

で、このmax-widthとmin-widthという言葉ですが、直感的に分かりにくいですよね？私は未だに迷う瞬間があります。

Media Queries Level 4によれば、これを比較演算子に置き換えることができます。

style.css

@media (width <= 768px) {
  .box {
    height: 50vh;
  }
}

めっちゃ分かりやすいやないかい😎。

この構文は、Media Queries Level 4でRange Contextとして記載されています。

比較演算子として、<=、<、>、>=の4種類が定義されています。

複数条件の時も

例えば「ビューポートが400pxから768pxの間だけ」という時にもこのRange Contextは活躍します。これまではこう書いていましたが、、、

style.css

@media (min-width: 400px) and (max-width: 768px) {
  .box {
    height: 50vh;
  }
}

このように書き換えることができます。

style.css

@media (400px <= width <= 768px) {
  .box {
    height: 50vh;
  }
}

簡潔に書き表わすことができて💯です。

さて、肝心のブラウザーの対応状況ですが、2022年6月現在、実はまだChromeのバージョン104以上とFirefoxでしか動作しません（Firefoxは謎に昔から対応していますね）。

EdgeとSafariの対応が待たれるところです（と言っても、仕様としてはまだ勧告候補の段階ですが、、、）。