メディアクエリー

媒体クエリー (構造)

[2] 媒体クエリー (Media Queries) の構文・構造としての媒体クエリー (media query) は、 媒体型媒体機能の条件を一種類分記述したものです。

仕様書

文脈

[4] 媒体クエリーは、媒体クエリーリストの一部として使われます。

[5] また、 addMedium メソッドの引数としても使われます。

構成

[3] 媒体クエリーは、

... によって構成されます。 >>1

[12] 媒体型が指定されている場合、 'not' キーワードにより真偽を逆転させられます。

構文

[11] 媒体クエリー仕様の一部ですので、基本的には CSSの構文によって表記・解釈されます。

[10] 媒体型および個々の媒体機能'and' によって区切ったリストとして記述します。 媒体型が含まれる場合は必ず最初に置きます。なおそれぞれの前後には空白を挿入できます。

[13] 媒体型が含まれる場合、その前に 'not' または 'only' を記述できます。 >>1

[21] 'and' の前後、 'not''only' の直後の空白は必須です。 >>1

[24] GeckoChrome空白がなくても良いようです。ただし媒体機能の括弧と直前のキーワードがくっつくと IDENT でなく FUNCTION になってしまいます。 Gecko はその場合構文エラーになりますが (正しい)、 Chrome はなぜか意図通りに解釈してしまいます。
[25] Chromeandescape を解釈できず構文エラーとしてしまいます。
[26] Chrome は構文エラーがあったときに、その場所によって?、仕様通り not all としたり、空文字列としたり、媒体機能の値だけ無視したり、@規則全体を無視したり、 おかしくなったりします。これらの場合でも Gecko は仕様通り動作します。

@media (color:hoge) {}Chrome が解釈するとなぜか

@media (color: 0.00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000008524391816) { 
}

... になります。

意味

[6] 媒体クエリーは、全体としてまたはのいずれかに評価される論理式と解されます。 媒体クエリーは、

... とき、です。 >>1

[7] >>6 以外の時はとなります。

[14] 'not' が指定されていれば、この真偽が逆転します。 >>1

[15] 'only' は解釈上は無視されます >>1

[23] ただし媒体機能が未知のものであるなど、媒体クエリー全体が not all と解釈される場合があります。 (媒体機能の項を参照。) この場合 CSSOM 上も not al になります >>22

適合性

[20] 媒体クエリーとしての構文に適合することに加え、媒体型媒体機能がそれぞれの仕様に適合していなければなりません。 >>1 規定されていない媒体型媒体機能は不適合です。

'all'

[8] 媒体型キーワード 'all' を指定すると、すべての媒体型と一致します >>1

[9] 'all' は省略できます。 >>1 媒体クエリー媒体型が明記されていなければ、どの媒体型にも一致します。

'not'

[16] キーワード 'not' は否定を表します。媒体クエリーの残りの部分の真偽の逆を表します。 'not' が使えるのは媒体型が明示されているときだけです。

[17] 'not''all' と併用することもできます。 'not all' とだけ指定すれば、何にも一致しなくなります。

'only'

[18] キーワード 'only' は意味を持たず解釈上は無視されます。 HTML4media 属性について規定されていた将来の拡張を考慮した解釈方法に従う古い利用者エージェント媒体クエリーを無視させたいときに使うことができます。

[19] 現在となっては媒体クエリーに対応していない利用者エージェントはほとんどありませんから、 もはや不要と言って良いでしょう。

[27] only の有無は意味的には影響を与えませんが、 ChromeFirefox とも CSSOM 上も有無が保持されているようです。