もうすぐ使える！CSSで比較演算子、Range syntax を試す

こんちは森田です。
前回コンテナクエリの記事を書いたのですが、その際にはまだ Safari が未対応だったのでサンプルコードには使わなかったCSS比較演算子が、いよいよリリース間近の Safari 16.4で対応になるので今回紹介させていただきます。

CSSで比較演算子(Range syntax)とは

参考：Media Queries Level 4 – W3C

Media Queries Level 4 で新しく策定された新しい記法です。
その名の通りメディアクエリで比較演算子が使えます。

対応ブラウザ

記事冒頭でも書きましたが、Safari が16.4で対応となるので、もうすぐ主要なブラウザは全て対応となります。

CSSで比較演算子(Range syntax)を試す

前回のコンテナクエリの記事 のコードを比較演算子に書き直してみます。

以下のようにコンテナが700px より大きい場合にスタイルを適用するには、今まででしたら min-width: 700px と書いて指定する必要がありました。

/* コンテナが 700px より大きい場合 */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

これがCSS比較演算子だと以下のように書き換えることができます。

/* コンテナが 700px より大きい場合 */
@container (700px <= width) {
  .card h2 {
    font-size: 2em;
  }
}

数値と 比較演算子 <= に対して width と書きます。これで「700px以上だったら」となりますね。

値と width を逆にして書くこともできます。

/* コンテナが 700px より大きい場合 */
@container (width >= 700px) {
  .card h2 {
    font-size: 2em;
  }
}

ただ、個人的には max-width を使う場合もあるので最小幅は左に置いた方が見やすいなと感じました。
以下のような場合です。

/* コンテナが 700px より大きいかつ 1200pxより小さい場合 */
@container (700px <= width <= 1200px) {
  .card h2 {
    font-size: 2em;
  }
}

視覚的に 700px と 1200px の間なんだなとわかりやすいですね。

ちなみに <= で以上・以下にしていましたが、不等号で未満・超過とすることもできます。

/* コンテナが 700px より大きいかつ 1200pxより小さい場合 */
@container (699px < width < 1201px) {
  .card h2 {
    font-size: 2em;
  }
}

この辺りも今までより直感的に書けるしわかりやすいですね。

まとめ

冗長になる今までのメディアクエリやコンテナクエリを直感的に書けて、そして読みやすい。
とてもいいアップデートだと思いました。

iOS 16.4 はCSS比較演算子も使えるようになりますが、それ以上にプッシュ通知が期待されていますね。こちらもリリースされたら試してみたいと思います。

本格的にPWAの時代が到来するかもしれませんね！期待して待ちます。