メディア・クエリ~メディア・クエリ修飾子

“メディア・クエリ修飾子”とは？

メディア・クエリには必要であれば“メディア・クエリ修飾子(Media Query Modifiers)”を付けることができます。

修飾子はメディア・クエリの先頭、メディア・タイプの前に1個だけ記述することができ、修飾子が付けられたメディア・クエリ全体の意味を変更します。

修飾子の一覧

仕様書

定義されている仕様書

not
only

“not”修飾子

概要

“not”修飾子はメディア・クエリを否定します。“not”修飾子はメディア・クエリの“真”と“偽”の判断を逆転させ、修飾子がなければ“真”となるメディア・クエリは“偽”となり、修飾子がなければ“偽”となるメディア・クエリは“真”となります。

“not”修飾子はその直後にあるメディア・タイプだけでなくメディア・クエリ全体を否定します。

サンプルコード

“only”修飾子

概要

“only”修飾子はメディア・クエリをメディア・タイプにしか対応していない古いユーザー・エージェントから隠すために使用することができます。

メディア・タイプだけが定義されていたHTML4の仕様では後方互換性を考慮してメディア・クエリを最初の英数字でない文字の直前までを読み取ってメディア・タイプとして解釈するようになっていました。それゆえメディア・タイプだけに対応している古いユーザー・エージェントはメディア・タイプの後に記述されたメディア・コンディションは無視されます。

この仕様ではメディア・タイプが“真”でメディア・コンディションが“偽”と判断される場合でもメディア・コンディションの真偽が無視されて意図しないスタイルが適用されてしまいますが、“only”修飾子はこのようなことを防ぐために使用することができます。

メディア・タイプにしか対応していないユーザー・エージェントではメディア・クエリの先頭に記述された“only”を無効なメディア・タイプとして解釈し、英数字ではないホワイトスペース(半角スペース(“ ”)、タブ文字など)以降のメディア・クエリを無視します。メディア・フィーチャーやメディア・コンディションにも対応しているユーザー・エージェントでは“only”修飾子の有無はメディア・クエリの結果に何の影響も与えません。

サンプルコード