どうも、何でも屋さんのささぴよです。
「比較的新しいCSSの機能に追いついていきつつ、すぐに使える物を紹介するシリーズ」ということで、今回はすぐには使え無い可能性が高いけど、すぐその辺まで来ている新しいメディアクエリの書き方のお話です。
前回はコンテナクエリの話をしましたが、そこにも絡んできます。既に使う事も可能なんですが、注意点が…。
残念ながら今回紹介する書き方は、執筆時現在Safariでのサポートが確認できていません。Technology Preview版でも未対応という事もあり、現行ではモバイルを含めたSafariと共にいくつかのモバイルブラウザ（日本ではあまり使われていないように思われます）を見捨てる必要があります。
Chromeが対応していることから、Safariでの対応も遠くはないと思いますが、現段階の注意点として理解しておきましょう。
なお、サポート状況については、毎度おなじみCanIUseを確認してみて下さい。
今までのメディアクエリはわかりづらい
今までのメディアクエリは以下のような書き方をする事が多かったですね。
@media (min-width: 375px) and (max-width: 768px) {
/* いろいろな指定が入る */
}2つの間を挟むときにはこんな書き方をしていましたね。しかし、コレはとても非直感的でわかりづらい。増しては日本語の「以上」「以下」の概念と「min」「max」の概念が混ざると脳内が大変なことになります。
コレをわかりやすく書けるようになるというお話。
新しい書き方はちょっと直感的
先述の内容を書き換えてみるとこうなります。
@media (375px <= width <= 768px) {
/* いろいろな指定が入る */
}かなりイメージしやすくなりましたね。以上なのか以下なのかもはっきりわかります。
ただ、プログラマ層からすると気持ち悪いという感じもあるかも知れません。どちらかというと数学的な表現であり、プログラムを書く際には「一対一の関係を複数組み合わせた条件にする」というのが一般的なので、感覚的にしっくりこないという方もいそうです。
プログラマ層に親切そうな書き方を探してみる
どうしても気持ち悪い…と感じるあなたにはこの書き方でどうでしょう？
@media (375px <= width) and (width <= 768px) {
/* いろいろな指定が入る */
}理論上こちらでも行けると思います。（未確認ですが、文法上の問題は無いはずです。）
とは言っても、多分プログラミングをそれなりにやっている方なら、「むやみに処理の回数を増やすべきではない」という前提を頭の中にお持ちでしょうから、この書き方よりも、1つに纏まった書き方の方が合理的という頭になるのではないかと。あぁ、でも何か気持ち悪い！ってなりそうな気もしますね。
もうここまで来ると好みだと思います。
いずれにしても min-width とmax-width で書かれた記述よりは見渡しが良くなった印象ですよね。
やっぱり変化は速くなっている
前回の記事でも触れたのですが、HTML5からHTML Living Standardに変わったタイミングでHTMLとしての言語の変化が凄く速くなりました。今まで慎重に策定や実装までの流れを決めるように時間をかけて変化させていたところから、モダンブラウザをリリースしているチームに近い所が策定するようになってきたことで、「変更のアップデートを反映させやすい環境ができた」という点が一因だと思います。それに追いつくように、CSSの変化も以前に比べるとスピード感が増していると思います。
今までにいろいろと策定され、勧告が完了していない物（「勧告」状態になると、ベンダープレフィクスを外すことが推奨されますので、そこで機能リリースと考えると良いと思います）というのはまだありますが、どんどん「今必要な物」というのが実装されて言っている気がします。
中には実装が待ち遠しい物も有ったりしますが、それはそれとして、みんながこの変化のスピードに追いついていく必要があるというのは間違いなさそうですし、ブラウザ開発者側もそのスピードに追いつくのが大変そうな気がしますね。
ということで、今回はちょっとあっさりしていますが、見渡しの良い書き方のお話でした。
もしプリプロセッサ（Sassなど）をお使いなら、そこでFunctionなりMixinなりを作るのもアリかもしれません。というか、そもそもの条件をFunctionの中で選べるようにしていたりする方も多いかもしれませんね。
次回位にはそのあたりの例を書いてみるのも良いかなと思ったりしました。もし、他にもこんなことを解説して欲しいなど有れば、Twitterなどにお寄せ下さい。
ではまた次回！