Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [1] [CITE@en[Media Queries Level 4]] ([TIME[2013-07-25 22:52:42 +09:00]] 版) <http://w3c-test.org/csswg/mediaqueries/#media0>
- [22] [CITE@en-US[CSS Object Model (CSSOM)]] ([TIME[2013-08-03 00:34:49 +09:00]] 版) <http://dev.w3.org/csswg/cssom/#media-queries>
]REFS]

* 文脈

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

[5] また、 [CODE(DOMm)@en[[[addMedium]]]] [[メソッド]]の引数としても使われます。

* 構成

[3] [[媒体クエリー]]は、
- [[媒体型]]: 1つ指定するか、すべて ([CODE(CSS)@en['[[all]]']])
- [[媒体機能]]についての条件を記述した[[式]]: 0個以上

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

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

* 構文

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

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

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

[21] [CODE(CSS)@en['[[and]]']] の前後、 [CODE(CSS)@en['[[not]]']] と [CODE(CSS)@en['[[only]]']] 
の直後の[[空白]]は必須です。 [SRC[>>1]]

;; [24] [[Gecko]] も [[Chrome]] も[[空白]]がなくても良いようです。ただし[[媒体機能]]の括弧と直前の[[キーワード]]がくっつくと
[[IDENT]] でなく [[FUNCTION]] になってしまいます。 [[Gecko]] はその場合構文エラーになりますが (正しい)、
[[Chrome]] はなぜか意図通りに解釈してしまいます。 [TIME[2013-08-03T02:29:36.300Z]]

;; [25] [[Chrome]] は [CODE(CSS)@en[[[and]]]] の [[escape]] を解釈できず構文エラーとしてしまいます。 [TIME[2013-08-03T02:32:20.100Z]]

;; [26] [[Chrome]] は構文エラーがあったときに、その場所によって?、仕様通り [CODE(CSS)@en[[[not]] [[all]]]]
としたり、[[空文字列]]としたり、[[媒体機能]]の[[式]]の値だけ無視したり、[[@規則]]全体を無視したり、
おかしくなったりします。これらの場合でも [[Gecko]] は仕様通り動作します。 [TIME[2013-08-03T02:34:46.800Z]]
[EG[
[CODE(CSS)@en[@media (color:hoge) {}]] を [[Chrome]] が解釈するとなぜか
[PRE(CSS code)[
@media (color: 0.00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000008524391816) { 
}
]PRE]
... になります。
]EG]

* 意味

[6] [[媒体クエリー]]は、全体として[[真]]または[[偽]]のいずれかに評価される[[論理式]]と解されます。
[[媒体クエリー]]は、
- [[媒体型]]が[[利用者エージェント]]の[[装置]]の[[媒体型]]と[[一致]]し、
- [[媒体機能]]の[[式]]がすべて[[真]]である

... とき、[[真]]です。 [SRC[>>1]]

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

[14] [CODE(CSS)@en['[[not]]']] が指定されていれば、この真偽が逆転します。 [SRC[>>1]]

[15] [CODE(CSS)@en['[[only]]']] は解釈上は無視されます [SRC[>>1]]。

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

* 適合性

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

* [CODE(CSS)@en['all']]

[8] [[媒体型]]に[[キーワード]] [DFN[[CODE(CSS)@en['[[all]]']]]] を指定すると、すべての[[媒体型]]と一致します
[SRC[>>1]]。

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

* [CODE(CSS)@en['not']]

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

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

* [CODE(CSS)@en['only']]

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

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

;; [27] [CODE(CSS)@en[[[only]]]] の有無は意味的には影響を与えませんが、
[[Chrome]]、[[Firefox]] とも [[CSSOM]] 上も有無が保持されているようです。 [TIME[2013-08-04T01:47:38.500Z]]

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)