ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ

筆者が CSS を学び始めたとき、media query で画面サイズに応じてスタイルを変える方法が大変ニガテでした😭 min？ max？ 未満のときはどうするの？ and で繋げなきゃいけないの？ 長くない？ と疑問に思いながら、今日まで長い年月を過ごしてきました。 本日（2023/03/28）、Safari 16.4 がリリースされ、 media query のrange（範囲）記法に対応しました。 ▼ 従来の media query の範囲指定

[pmint]

"599px"や"601px"は誤り。どちらも"600px"にして、600pxの定義を重複させるのが正しい。599.99999pxにも対応できる。同様に < は全部 <= にするのがいい。/ 縦か横かはorientationがある。縦横比のaspect-ratioもある。

[mayumayu_nimolove]

sassで書き換えてる人やtailwinderもいるしそれほどでも

[nmcli]

何年かしたら触ってみるかな

[shingo-sasaki-0529]

メディアクエリの現行の書き方ほんとムズいから、もう一声、シェア2%以上のブラウザが全部サポートされるぐらいの時代になるのを楽しみにしてる。

[w_bonbon]

画面幅準拠じゃなくて＠media (スマホ縦) {} / くらい雑に指定したい…。デバイス情報へのアクセスというか。タブレットが変な画面で増えるといちいち厄介でさぁ。

[Shinwiki]

迷走してる。何でもかんでもas codeに寄せたいならそれでもいいんだけど中途半端はヤメロ

[Helfard]

便……利…？

[ducktoon]

やっと普通の書き方ができるようになった

[daigo0117]

Safariは機能追加するよりも先にエバーグリーン化してくれ。

[yarumato]

“従来のMedia Queryは min-** max-** and で画面の横幅を指定。範囲指定の <= < を使えるようになった。今すぐ range 記法を使いたいのであれば、PostCSSとプラグインを使うと変換してくれます。”