モバイル・ファーストが浸透して久しくなり、めっきりmin-widthクエリー以外を見かけることはなくなった。そんな中、not (max-width: 768px)という書き方を見かけて、なるほどなと思った。現状のブラウザーにおける実装(と安定した仕様)では768pxを含まずそれより大きいという表現がmin-widthでは書くことができないが、notキーワードとmax-widthを組み合わせることで実現できる。
Demo: Negation of max-width query
特定のデバイスや解像度を強く意識したクエリーの是非はとりあえず脇へ置いておいて、iPhone 5s以下やらiPad Airやら一般的なノートブックやらを意識してクエリーを書くことはままある。多くの場合はそれら特定のデバイスのサイズからを区切りにしてクエリーを書くわけだが、それらのサイズまでで書くとなると少し曖昧な記述になる。
@media (min-width: 321px) {}
@media (min-width: 769px) {}
@media (min-width: 1025px) {}つまりこのように1px足した値を使ってクエリーを書くわけだ。慣れればわかるとは言え微妙な感じは否定できない。
@media not all and (max-width: 320px) {}
@media not all and (max-width: 768px) {}
@media not all and (max-width: 1024px) {}notキーワードとmin-widthと対になるmax-widthを組み合わせると、このようにも書けることになる。allなどのメディア・タイプと共に指定してやる必要があり、widthやresolutionなどといった具体的なメディア特性だけを否定することは出来ない……らしいが特にLevel 3仕様でも2014/06/05のLevel 4仕様のWorking Draftでも触れられていない。CSS 2.1仕様との後方互換性のためそういう実装になっているのかもしれない。
Media Queries Level 4 (Public Wrking Draft, 5 June 2014)ではwidthクエリー他で範囲指定が可能になる予定で、それと同時により下・以下・以上・より上を区別して書くことができるようになる。この実装が広まるまではnotキーワードを利用して表現してやるというのも窮余の一策としてはまずまずなものだろう。