CSS激アツニュースです。ついにSafari16.4でmedia queryのrange記法に対応したので、今後は「min-width……max-width……どっちがどっちだった？」と迷わなくてよくなりそう。
詳しくはこちらの記事を読んで欲しい。
/* いままでの書き方 */ @media screen and (min-width: 992px) {} /* range記法 */ @media screen and (992px <= width) {} /* あるいは */ @media screen and (width >= 992px) {}
不等号の向きはプロジェクトごとに統一したほうがよさそうだけど、めちゃくちゃわかりやすい！ jsをスラスラ書ける人なら余計にわかりやすいんじゃないだろうか。
いままでの書き方だと「未満」に対応できなかったので、
@media screen and (min-width: 767px) and (max-width: 992px) {}
こういう記述を
@media screen and (768px <= width < 992px) {}
こういうふうに置き換えられるように。（いまどきこういう書き方をすることはあんまりないと思うものの）便利だ！
ただ上の記事にもあるように、Can I UseみるとAndroid Chromeなどは最新バージョンにしか対応していないので、しばらくはプラグインなどで古い記述に変換するのがよさそうですね。IEはサポートが終了したので知りません。
Media Queries: Range Syntax | Can I use... Support tables for HTML5, CSS3, etc
いうても、ほとんどsassで書いてるから、実際に叩く手はそんなに変わらないんですけど。
それでもSCSSをコンパイルしない人がCSSだけを見て、納品後細々した調整をすることもあるので、わかりやすくなるのはいいことと思います。
本当はCSSも大まかにでもルールがあるとやりやすいけど、そのルールを手探りでやらなければならないこととか、開けてみたらすでにPC優位とスマホ優位の併用でわかりにくくなっていたりとかも、とてもよくある出来事なので、パッと見てわかりやすくなるのは本当に大歓迎。
last 2verくらいになったら変換とかも気にしなくていいと思うので、今後CSS書くのがまたちょっと楽しくなりそうです。
わざわざ記事を書くほど嬉しかったし、ちょっと感動したのだった。
不等号馴染みない人へ
CSSしか触ってなくて不等号に馴染みのない人は、JavaScriptの書き方をちょっと勉強すると理解が深まると思います。自分はprogateが好きだけど、ドットインストールとかでもいいかもね。JavaScriptのまじの基礎なら、progate。webサイトに使う部分*1ならドットインストールがいいでしょう。
Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
プログラミングのレッスン一覧 - プログラミングならドットインストール
それでは。
*1:スライダーとか、ハンバーガーメニューとかで勉強したい人
