メディアクエリ レベル 4

1. はじめに

この節は規範的ではありません。

1997年、HTML4 [HTML401] は、異なる メディア型 に合わせて メディア依存のスタイルシートをサポートするための仕組みを定義しました。 例えば、文書は画面用と印刷用で異なるスタイルシートを使用できます。 HTMLでは次のように書けます：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

CSSは @media と @import 規則でこの機能を適応・拡張し、 個々の特性の値を問い合わせる機能を追加しました：

@media screen {
  * { font-family: sans-serif }
}

@import "print-styles.css" print;

メディアクエリ は HTML、XHTML、XML [xml-stylesheet] および CSSの@importと@media規則で使用できます。

<link media="screen and (color), projection and (color)"
      rel="stylesheet" href="example.css">

<link media="screen and (color), projection and (color)"
      rel="stylesheet" href="example.css" />

<?xml-stylesheet media="screen and (color), projection and (color)"
                 rel="stylesheet" href="example.css" ?>

@import url(example.css) screen and (color), projection and (color);

@media screen and (color), projection and (color) { … }

1.1. モジュール間の相互作用

このモジュールは、[CSS2] のセクション7および [MEDIAQUERIES-3] で定義されたメディアクエリ、メディア型、メディア特性を置き換え、拡張します。

1.2. 値

この仕様で定義されていない値型、例えば <integer>、 <number>、 または <resolution> は、 [CSS-VALUES-3] で定義されています。他のCSSモジュールはこれらの値型の定義を拡張する場合があります。

1.3. 単位

メディアクエリで使用される単位は、CSSの他の部分と同じであり、 [CSS-VALUES-3] で定義されています。例えば、ピクセル単位は CSSピクセルを表し、物理ピクセルではありません。

相対長 単位は、 初期値 に基づきます。 つまり、単位は宣言の結果に基づくことはありません。例えばHTMLでは、 em 単位は 初期値 である font-size に相対し、 ユーザーエージェントまたはユーザーの設定で定義され、ページ上のスタイルには依存しません。

2. メディアクエリ

メディアクエリは、 文書が表示されているユーザーエージェント またはデバイスの特定の側面をテストする方法です。メディアクエリは（ほぼ）常に文書の内容から独立しており、 そのスタイリング、 またはその他の内部的な側面には依存しません。 別の特性が、メディアクエリの解決に影響すると明示的に規定していない限り、 それらは「外部」の情報にのみ依存します。

メディアクエリ の構文は、 任意の メディアクエリ修飾子、 任意の メディア型、 そして0個以上の メディア特性 から成ります：

メディアクエリ は 真または偽となる論理式です。 メディアクエリが真となるのは次の場合です：

• 指定されている場合、メディア型 が ユーザーエージェントが動作しているデバイスのメディア型と一致し、かつ

• メディア条件 が真である。

本節のメディアクエリに関する記述は 構文節 に従うことを前提とします。 構文に合致しないメディアクエリは § 3.2 エラー処理 で扱います。 すなわち、構文が本節の要件より優先します。

<link rel="stylesheet" media="screen and (color)" href="example.css" />

@import url(example.css) screen and (color);

ユーザーエージェントは、認識できるユーザー環境の変化に応じて メディアクエリ を再評価しなければなりません。 例えば、デバイスが横向きから縦向きに回転された場合などです。 そして、これらの メディアクエリ に依存する構成の挙動を それに合わせて変更しなければなりません。

別の特性がメディアクエリの解決に影響すると明示しない限り、 式を評価するためにスタイルシートを適用する必要はありません。

2.1. メディアクエリの結合

複数の メディアクエリ を カンマ区切りの メディアクエリリスト に結合できます。

メディアクエリリスト は、 構成要素の メディアクエリ の いずれか が真であれば真となり、 構成要素の メディアクエリ が すべて 偽の場合にのみ偽となります。

@media screen and (color), projection and (color) { … }

空の メディアクエリリスト は真と評価されます。

@media all { … }
@media { … }

2.2. メディアクエリ修飾子

メディアクエリ は、 任意で単一の メディアクエリ修飾子 を前置できます。 これは後続の メディアクエリ の意味を変更する単一のキーワードです。

2.2.1. メディアクエリの否定: not キーワード

個々の メディアクエリ は、 not キーワードを前置することで結果を反転できます。 メディアクエリ が通常真と評価される場合、 not を付けると偽になり、その逆も同様です。

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

2.2.2. レガシーなユーザーエージェントからメディアクエリを隠す: only キーワード

メディアクエリ の概念は HTML4 [HTML401] に由来します。 その仕様では メディア型 のみが定義されていましたが、 将来的な メディア特性 の追加に対応できる 前方互換の構文を持っていました。 それは メディアクエリ の文字列を最初の非英数字まで読み取り、 それを メディア型 と解釈し、残りを無視するというものです。 例えば、メディアクエリ screen and (color) は screen に切り詰められます。

残念ながら、こうしたエラー処理を行うレガシーなユーザーエージェントは、 メディア特性 を含む メディアクエリ を無視してしまいます。 これは、特性が メディア型 より重要であっても同様です。 その結果、不適切な状況でスタイルが適用されることがあります。

これらの メディアクエリ を レガシーなユーザーエージェントから隠すために、 メディアクエリ に only キーワードを前置できます。 only キーワードは メディアクエリ の結果に影響しませんが、 レガシーなユーザーエージェントには未知の メディア型「only」として解析され、無視されます。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Note: only キーワードは メディア型 の前にのみ使えます。 メディアクエリ が メディア特性 のみで構成される場合、 または メディアクエリ修飾子（例：not）を含む場合、 レガシーなユーザーエージェントでは自動的に偽として扱われます。

Note: この仕様の公開時点では、 そのようなレガシーなユーザーエージェントは極めて稀であり、 only 修飾子は、ほとんど（あるいは全く）必要ありません。

2.3. メディア型

メディア型 は、文書が表示される ユーザーエージェントデバイスの大まかなカテゴリです。 最初の メディア型 は HTML4 で定義され、 <link> 要素の media 属性で使用されました。

残念ながら、メディア型 は 異なるスタイリング要件を持つデバイスを判別する手段として不十分であることが示されました。 例えば、screen と handheld のように もともと明確に区別されていたカテゴリが、年月とともに大きく融合しました。 一方で、tty や tv のようなカテゴリは、 高機能なモニタの標準から有用な差異を示し、 異なるスタイリングの対象として潜在的に有用ですが、 メディア型 が相互排他的であるため 合理的な方法で利用するのが難しくなっています。 そのため、排他的な側面は メディア特性 として表現する方が適切です。 例えば grid や scan です。

したがって、次の メディア型 が メディアクエリ で使用できます：

all

すべてのデバイスに一致。

print

プリンタ、および印刷表示を再現する目的のデバイス（印刷プレビュー表示のブラウザなど）に一致。

screen

print に一致しないすべてのデバイスに一致。

加えて、以下の非推奨の メディア型 が定義されています。 著者はこれらの メディア型 を使用してはなりません。 代わりに、デバイスの対象となる側面をより適切に表す メディア特性 を選択することが推奨されます。

ユーザーエージェントは次の メディア型 を有効として認識しなければなりませんが、 何にも一致しないものとして扱わなければなりません。

• tty
• tv
• projection
• handheld
• braille
• embossed
• aural
• speech

Note: これらのメディア型も、重要な差異を捉える メディア特性 が定義され次第、 いずれは非推奨になると予想されます。

2.4. メディア特性

メディア特性 は、 メディア型 よりも細かなテストであり、 ユーザーエージェントまたは表示デバイスの単一の特定特性をテストします。

構文的には、メディア特性 は CSSプロパティに似ています： 特性名、コロン、そしてテストする値で構成されます。 特性名だけのブール形式や、比較演算子を伴う範囲形式でも書けます。

ただし、プロパティとメディア特性にはいくつか重要な違いがあります：

• プロパティは文書の表示方法に関する情報を与えます。 メディア特性は出力デバイスの要件を記述します。
• メディア特性は常に括弧で囲まれ、 and または or キーワードで結合されます。 (color) and (min-width: 600px) のように、 セミコロンで区切られることはありません。
• メディア特性は名前のみ（コロンと値を省略）で与えることができ、 ブール文脈 で評価されます。 これは、0または「none」を表す妥当な値を持つ特性の簡便な略記です。 例えば (color) は、 color メディア特性 が 非ゼロであれば真です。
• “range”型の メディア特性 は 範囲文脈 で書くことができ、 コロンではなく標準的な数学的比較演算子を使用します。 または、特性名に 「min-」や「max-」接頭辞 を付けられます。
• プロパティは時に複雑な値（複数値を含む計算など）を受け入れます。 メディア特性 は 単一の値（1つのキーワード、1つの数値など）しか受け入れません。

メディア特性 が参照する概念が UAが動作するデバイスに存在しない場合 （例えば、音声UAには「width」の概念がない）、 メディア特性 は常に偽と評価されなければなりません。

<link media="speech and (device-aspect-ratio: 16/9)"
      rel="stylesheet" href="example.css">

2.4.1. メディア特性の型: “range” と “discrete”

すべてのメディア特性は、その定義表で「range」または「discrete」のいずれかの“型”を持ちます。

“discrete” メディア特性（例：pointer）は 値の集合から取り出されます。 値はキーワードまたはブール数（0と1）ですが、 共通点はそれらに固有の「順序」がないことです。 つまり、値同士に「小さい」「大きい」の関係がありません。

一方、“range” メディア特性（例：width）は 範囲から値を取ります。 任意の2つの値を比較して、どちらが小さいか大きいか判断できます。

両者の大きな違いは、“range” メディア特性 が 範囲文脈 で評価でき、 名称に「min-」や「max-」接頭辞を受け入れることです。 これらを行うと特性の意味が変わり、メディア特性 が指定値と完全一致する場合に真となるのではなく、 指定値以上／以下／等しい場合に一致します。

2.4.2. ブール文脈におけるメディア特性の評価

メディア特性 は通常 CSSプロパティに似た構文を持ちますが、 特性名だけ（例：(color)）で書くこともできます。

この形で書かれた場合、メディア特性 は ブール文脈 で評価されます。 特性が 0 以外の任意の値で真となる場合、 値が 0 の <dimension>、 またはキーワード none 以外であれば、 メディア特性 は真になります。 それ以外の場合は偽になります。

2.4.3. 範囲文脈におけるメディア特性の評価

“range” 型の メディア特性 は、 値が順序付けられていることを活かした 範囲文脈 で 通常の数学的比較演算子を使って書くこともできます：

Note: この構文は Media Queries レベル4で新たに追加されたため、 現時点では min-/max- 接頭辞ほど広くサポートされていません。

基本形は、特性名、比較演算子、値から成り、 関係が真なら真を返します。

残りの形式は、特性名が二つの比較の間に挟まれており、 両方の比較が真のときに真を返します。

“range” 型の一部のメディア特性は 負の範囲で偽 とされます。 つまり、負の値は有効で解析される必要があり、 そのような負の値に等しい／小さい／以下であるかを問い合わせると 常に偽と評価されます。 一方、負の値より大きい／以上であるかの問い合わせは 関係が真なら真と評価されます。

Note: もし負の値が解析時に拒否されていれば、 エラー処理規則により unknown と扱われていたでしょう。 しかし実際には、デバイスの resolution が -300dpi かどうかは 未知ではなく、偽であることが分かっています。 同様に、任意の視覚デバイスで表示領域の width が -200px より大きいことは確実です。上記の規則はこの直感に合わせるものです。

@media not (width <= -100px) {
  body { background: green; }
}

@media (height > -100px) {
  body { background: green; }
}

@media not (resolution: -300dpi) {
  body { background: green; }
}

2.4.4. 範囲特性に対する「min-」と「max-」接頭辞の使用

上述のように“range”型の メディア特性 を範囲文脈で評価する代わりに、 特性名に「min-」または「max-」接頭辞を付けて通常の メディア特性 として書けます。

これは次のように 範囲文脈 と等価です：

• 特性名に「min-」接頭辞を付けるのは “>=” 演算子を使うのと同等です。 例えば、(min-height: 600px) は (height >= 600px) と等価です。
• 特性名に「max-」接頭辞を付けるのは “<=” 演算子を使うのと同等です。 例えば、(max-width: 40em) は (width <= 40em) と等価です。

Note: “min-” と “max-” はどちらも 比較が値を含むため、 特定の状況では制約が生じる場合があります。

@media (max-width: 320px) { /* styles for viewports <= 320px */ }
@media (min-width: 321px) { /* styles for viewports >= 321px */ }

@media (max-width: 320px) { /* styles for viewports <= 320px */ }
@media (min-width: 320.01px) { /* styles for viewports >= 320.01px */ }

@media (width <= 320px) { /* styles for viewports <= 320px */ }
@media (width > 320px) { /* styles for viewports > 320px */ }

“discrete” 型プロパティは「min-」「max-」接頭辞を受け付けません。 “discrete” 型の メディア特性 に接頭辞を付けると、 未知の特性名となります。

min/max 接頭辞付きの メディア特性 を ブール文脈 で評価しようとするのは無効であり構文エラーです。

2.5. メディア特性の結合

複数の メディア特性 は、 完全なブール代数（not, and, or）を使って メディア条件 に結合できます。

• 任意のメディア特性は、前に not を置くことで否定できます。 例えば not (color) は (color) の意味を反転します— (color) が任意の色表示があるデバイスに一致するため、 not (color) は色表示がないデバイスに一致します。

• 2つ以上のメディア特性は and で連結でき、 すべてが真のときのみクエリが真になります。 例えば、(width < 600px) and (height < 600px) は 両方の寸法で 600px 未満の画面を持つデバイスにのみ一致します。

• あるいは、or で連結すると、 いずれかが真であればクエリが真になります。 例えば、(update: slow) or (hover: none) は 画面更新が遅いデバイス（e-reader など）または 主要ポインティングデバイスがホバー能力を持たない場合に一致します。 これは、ホバー時まで情報を隠すより、より多くの情報を常時表示するレイアウトが 望ましい状況を示します。

• メディア条件 は、 括弧 () でグループ化でき、 単一のメディアクエリと同様に条件内で入れ子にできます。 例えば、(not (color)) or (hover) は モノクロおよび/またはホバー可能なデバイスで真になります。 逆に、モノクロでホバーできないデバイスを問い合わせたい場合、 not ((color) or (hover))（または同等の (not (color)) and (not (hover))）と書く必要があります。

and と or と not を メディアクエリの同じ「レベル」で混在させるのは 無効 です。 例えば、(color) and (pointer) or (hover) は違法です。 意図が不明確なためです。 代わりに、特定の結合キーワードでグループ化するための括弧を用い、 (color) and ((pointer) or (hover)) あるいは ((color) and (pointer)) or (hover) とします。 これらは意味が大きく異なります： (hover) だけが真の場合、 前者は偽、後者は真になります。

3. 構文

メディアクエリ構文の非形式的な説明は、前節の文章およびレールロード図に記載されています。 形式的なメディアクエリ構文はこの節で説明され、 規則/プロパティの文法構文は [CSS-SYNTAX-3] と [CSS-VALUES-3] で定義されています。

<media-query-list> 生成規則を解析するには、 コンポーネント値のカンマ区切りリストを解析し、 返されたリストの各エントリを <media-query> として解析します。 その値は、生成された <media-query> のリストです。

Note: <media-query-list> 解析の明示的な定義は、 メディアクエリリスト のエラー回復動作を明確にするために必要です。

Note: この <media-query-list> 解析の定義は空リストを意図的に許容します。

Note: [CSS-SYNTAX-3] に従い、トークンは ASCII 大文字小文字非区別 です。

<media-query> = <media-condition>
             | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
<media-type> = <ident>

<media-condition> = <media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]
<media-condition-without-or> = <media-not> | <media-in-parens> <media-and>*
<media-not> = not <media-in-parens>
<media-and> = and <media-in-parens>
<media-or> = or <media-in-parens>
<media-in-parens> = ( <media-condition> ) | ( <media-feature> ) | <general-enclosed>

<media-feature> = [ <mf-plain> | <mf-boolean> | <mf-range> ]
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> <mf-comparison> <mf-value>
           | <mf-value> <mf-comparison> <mf-name>
           | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value>
           | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
<mf-lt> = '<' '='?
<mf-gt> = '>' '='?
<mf-eq> = '='
<mf-comparison> = <mf-lt> | <mf-gt> | <mf-eq>

<general-enclosed> = [ <function-token> <any-value>? ) ] | [ ( <any-value>? ) ]

<media-type> 生成規則には、 only、 not、 and、or、layer は含まれません。

Note: layer を除外するのは、 @import url(…) layer; という カスケードレイヤー の構文で 曖昧になるためです。 [CSS-CASCADE-5] を参照してください。

“<” または “>” の <delim-token> と、続く “=” <delim-token> の間には 空白を入れてはなりません（存在する場合）。

Note: not、and、or と後続の ( の間には空白が必要です。 空白がないと <function-token> として解析されます。 これは上記文法で既に網羅されているため明示的に無効とはしていません。 ただし ) と後続のキーワードの間の空白は問題ありません。

<media-in-parens> を解析する際は、 入力が前の分岐に一致しない場合にのみ <general-enclosed> 分岐を選ばなければなりません。 <general-enclosed> は将来の文法拡張との互換性を保つために存在します。

3.1. メディアクエリの評価

<media-condition> または <media-condition-without-or> の主要な部分式は 以下のように真偽値が関連付けられます：

<media-condition>

<media-condition-without-or>

結果は子部分式の結果です。

<media-in-parens>

結果は子項の結果です。

<media-not>

結果は <media-in-parens> 項の否定です。 unknown の否定は unknown です。

<media-in-parens> <media-and>*

結果は、<media-in-parens> 子項と、 <media-and> 子項の <media-in-parens> 子が すべて真なら真、 これらの <media-in-parens> の 少なくとも一つが偽なら偽、 それ以外は unknown です。

<media-in-parens> <media-or>*

結果は、<media-in-parens> 子項と、 <media-or> 子項の <media-in-parens> 子が すべて偽なら偽、 これらの <media-in-parens> の 少なくとも一つが真なら真、 それ以外は unknown です。

<general-enclosed>

結果は unknown です。

著者はスタイルシート内で <general-enclosed> を使用してはなりません。これは将来互換性のためだけに存在し、 古いユーザーエージェントで新しい構文追加が <media-condition> を できるだけ無効化しないようにするためです。

<media-feature>

結果は指定されたメディア特性を評価した結果です。

上記の生成規則の結果が二値の真偽値を期待する文脈で使用される場合、 “unknown” は “false” に変換されなければなりません。

Note: これは例えば、 メディアクエリ が @media 規則で使用され、 “unknown” に解決された場合、 “false” として扱われ一致しないことを意味します。

3.2. エラー処理

前節の文法に一致しないメディアクエリは、解析時に not all に置き換えられなければなりません。

Note: 文法不一致は メディアクエリリスト全体を無効にしません。 問題のある メディアクエリ のみが対象です。 上記の解析動作は次のトップレベルのカンマで自動的に回復します。

@media (example, all,), speech { /* only applicable to speech devices */ }
@media &test, speech           { /* only applicable to speech devices */ }

@media (example, speech { /* rules for speech devices */ }

未知の <media-type> は一致しないものとして扱われます。

未知の <mf-name> または <mf-value>、 またはその メディア特性 の値構文に一致しない値は “unknown” となります。 値が “unknown” の <media-query> は not all に置き換えられなければなりません。

<link media="screen and (max-weight: 3kg) and (color), (color)"rel="stylesheet" href="example.css" />

@media (min-orientation: portrait) { … }

@media test;,all { body { background: lime } }

4. ビューポート/ページ寸法のメディア特性

4.1. 幅: width 特性

width メディア特性は、 出力デバイスの対象表示領域の幅を記述します。 連続メディア では ビューポートの幅（CSS2 セクション9.1.1 [CSS2]）で、 レンダリングされたスクロールバーのサイズ（ある場合）を含みます。 ページメディア では ページボックスの幅（CSS2 セクション13.2 [CSS2]）です。

<length> は § 1.3 単位 に従って解釈されます。

width は 負の範囲で偽 です。

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

@media (400px <= width <= 700px) { … }

@media (min-width: 20em) { … }

4.2. 高さ: height 特性

height メディア特性は、 出力デバイスの対象表示領域の高さを記述します。 連続メディア では ビューポートの高さで、レンダリングされたスクロールバーのサイズ（ある場合）を含みます。 ページメディア では ページボックスの高さです。

<length> は § 1.3 単位 に従って解釈されます。

height は 負の範囲で偽 です。

4.3. アスペクト比: aspect-ratio 特性

aspect-ratio メディア特性は、 width メディア特性の値と height メディア特性の値の比として定義されます。

4.4. 向き: orientation 特性

portrait

orientation メディア特性は、 height メディア特性の値が width メディア特性の値以上のとき portrait です。

landscape

それ以外の場合、orientation は landscape です。

@media (orientation: portrait) { … }

5. 表示品質のメディア特性

5.1. 表示解像度: resolution 特性

resolution メディア特性は、 出力デバイスの解像度、つまりピクセル密度を記述します。 ページズーム を考慮し、 スケール係数 を 1.0 と仮定します。

resolution メディア特性は 負の範囲で偽 です。

非正方形ピクセルのメディアを問い合わせる場合、 resolution は垂直方向の密度を問い合わせます。

プリンタの場合、これはスクリーン解像度（任意色の印刷ドットの解像度）に対応します。 プリンタはグレースケール印刷で異なる解像度を持つ場合があります。

物理的な解像度制約のない出力媒体（ベクターグラフィックスなど）では、 この特性は infinite 値に一致しなければなりません。 範囲文脈 で評価する目的では、 infinite は どんな <resolution> よりも大きいとみなされます。 （つまり、(resolution > 1000dpi) は infinite メディアで真になります。）

@media (resolution >= 2dppx)

@media print and (min-resolution: 300dpi) { … }

@media print and (min-resolution: 118dpcm) { … }

5.2. 表示種別: scan 特性

scan メディア特性は、いくつかの出力デバイスの走査方式を記述します。

interlace

CRTや一部のプラズマTVは「インターレース」表示を使用し、 偶数行と奇数行を交互に描画することで、 視覚の補完効果を利用して滑らかな動きを再現しました。 これは帯域を半分に抑えつつ高いFPSの放送を模擬できました。

インターレース画面で表示する場合、 著者は非常に高速な移動を避けて「コーミング」を防ぎ、 「twitter」 を避けるため 画面上の詳細を 1px より幅広くする必要があります。

progressive

「プログレッシブ」表示の画面は全フレームを表示し、 特別な扱いは不要です。

現代のほとんどの画面、およびすべてのコンピュータ画面はプログレッシブ表示です。

@media (scan: interlace) { body { font-family: sans-serif; } }

Note: 執筆時点では、既知の実装はすべて scan: progressive に一致し、scan: interlace には一致しません。

5.3. コンソール表示の検出: grid 特性

<mq-boolean> = <integer [0,1]>

grid メディア特性は、出力デバイスがグリッドかビットマップかを問い合わせます。 出力デバイスがグリッドベース （例えば “tty” 端末や固定フォントのみの電話ディスプレイ）であれば値は1です。 それ以外は0です。

<mq-boolean> 値型は 0 または 1 の値を持つ <integer> です。 その他の整数値は無効です。-0 は CSS で常に 0 と同一なので、 有効な <mq-boolean> 値として受け入れられます。

Note: <mq-boolean> 型はレガシー目的のみに存在します。 もし今日設計されるなら、 値には適切な名前付きキーワードを使用していたでしょう。

@media (grid) and (max-width: 15em) { … }

Note: 執筆時点では、既知の実装はすべて grid: 0 に一致し、grid: 1 には一致しません。

5.4. 表示更新頻度: update 特性

update メディア特性は、 出力デバイスがレンダリング後に内容の見た目を変更できる能力を問い合わせます。 以下の値を受け入れます：

none

一度レンダリングするとレイアウトは更新できません。 例：紙への印刷。

slow

レイアウトはCSSの通常の規則に従って動的に変化できますが、 出力デバイスが十分速くレンダリング/表示できず、 滑らかなアニメーションとして知覚されません。 例：電子インク画面や非常に低速なデバイス。

fast

レイアウトはCSSの通常の規則に従って動的に変化でき、 出力デバイスが特別に速度制約されていないため、 CSSアニメーションのような定期更新を利用できます。 例：コンピュータ画面。

@media (update) {
  a { text-decoration: none; }
  a:hover, a:focus { text-decoration: underline; }
}
/* 更新不可のUAでは、リンクは常に既定の下線を持つ */

5.5. ブロック軸オーバーフロー: overflow-block 特性

overflow-block メディア特性は、 コンテンツが初期包含ブロックから ブロック軸 方向に はみ出したときのデバイスの挙動を記述します。

none

ブロック軸 に オーバーフローの手段がなく、はみ出した内容は表示されません。 例：ビルボード

scroll

ブロック軸 の はみ出した内容はスクロールで表示されます。 例：コンピュータ画面

paged

内容は離散的なページに分割され、 ブロック軸 で 1ページからはみ出した内容は次のページに表示されます。 例：プリンタ、電子書籍リーダー

none または scroll に一致するメディアは 連続メディア と呼ばれ、 paged に一致するものは ページメディア と呼ばれます。

Note: 将来、このメディア特性に追加の値が追加される可能性があります。 それは 連続 と ページメディア の両面を持つ ハイブリッドな挙動のユーザーエージェントを記述するためです。 例えば、Presto レイアウトエンジン（現在は廃止）は、 強制改ページを尊重する点以外は continuous に似た 半ページ化のプレゼンテーションモードを備えていました。 現在その種の挙動を持つUAが確認されていないため、 作業グループはこのレベルで値を追加しないことに決定しました。 上記いずれの値でも十分に説明できないユーザーエージェントを実装する場合は、 作業グループに連絡し、このメディア特性の拡張を検討するよう促されています。

5.6. インライン軸オーバーフロー: overflow-inline 特性

overflow-inline メディア特性は、 コンテンツが初期包含ブロックから インライン軸 方向に はみ出したときのデバイスの挙動を記述します。

none

インライン軸 に オーバーフローの手段がなく、はみ出した内容は表示されません。

scroll

インライン軸 の はみ出した内容はスクロールで表示されます。

Note: インライン方向のはみ出しに対するページ化オーバーフローの 既知の実装はなく、この概念自体があまり意味を成さないため、 paged 値は overflow-inline には意図的に存在しません。

6. 色に関するメディア特性

6.1. 色深度: color 特性

color メディア特性は、 出力デバイスの色成分あたりのビット数を記述します。 デバイスがカラーデバイスでない場合、値は0です。

color は 負の範囲で偽 です。

@media (color) { … }
@media (min-color: 1) { … }

@media (color >= 8) { … }

色成分ごとにビット数が異なる場合、最小のビット数が使用されます。

インデックスカラーのデバイスでは、ルックアップテーブル内の 色成分あたりの最小ビット数が使用されます。

Note: この機能は色の能力を表面的にしか記述できません。 color-gamut の方が 著者のニーズに一般的に適しています。 さらに機能が必要な場合は、 RFC2879 [RFC2879] が より具体的なメディア特性を提供しており、将来的にサポートされる可能性があります。

6.2. パレットカラー画面: color-index 特性

color-index メディア特性は、 出力デバイスのカラールックアップテーブルのエントリ数を記述します。 デバイスがカラールックアップテーブルを使用しない場合、値は0です。

color-index は 負の範囲で偽 です。

@media (color-index) { … }
@media (color-index >= 1) { … }

<?xml-stylesheet media="(min-color-index: 256)"
  href="http://www.example.com/…" ?>

6.3. モノクロ画面: monochrome 特性

monochrome メディア特性は、 モノクロフレームバッファのピクセルあたりのビット数を記述します。 デバイスがモノクロでない場合、出力デバイスの値は0です。

monochrome は 負の範囲で偽 です。

@media (monochrome) { … }

@media (monochrome >= 2) { … }

<link rel="stylesheet" media="print and (color)" href="http://…" />
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

6.4. 色表示品質: color-gamut 特性

color-gamut メディア特性は、 UAと出力デバイスがサポートするおおよその色域を記述します。 つまり、UAが指定された色空間の色を受け取った場合、 出力デバイスは適切な色、または十分に近い色を表示できるということです。

Note: このクエリが概算範囲を使用する理由はいくつかあります。 第一に、表示ハードウェアの差異が大きいこと。 例えば「Rec. 2020」に対応すると主張しながら、 実際にはその全色域のかなり低い範囲しか再現できないデバイスがあります。 第二に、デバイスがサポートする色域が多数存在し、それらをすべて列挙するのは煩雑です。 多くの場合、著者は表示がsRGBより優れているか、 あるいはsRGBより大幅に優れているかを知るだけで十分です。 それにより、適切な色プロファイル付き画像を ユーザーに提供できます。

srgb

UAと出力デバイスがsRGB色域またはそれ以上をサポートできます。

Note: ほとんどのカラーディスプレイが このクエリに真を返すと予想されます。

p3

UAと出力デバイスが Display P3 [Display-P3] 色空間、またはそれ以上の色域をサポートできます。

Note: p3 色域は srgb 色域より大きく、 それを含みます。

rec2020

UAと出力デバイスが ITU-R Recommendation BT.2020 色空間、またはそれ以上の色域をサポートできます。

Note: rec2020 色域は p3 色域より大きく、 それを含みます。

以下の表は、[COLORIMETRY] で定義される 色空間の色度座標に基づき、これらの色空間の原色を示します。

Note: 上表は色空間を完全に記述するには不十分ですが、 出力デバイスが各色域をおおよそカバーしているか判断するには十分です。 sRGBについては [SRGB]、 Display P3については [Display-P3]、 ITU-R Recommendation BT.2020については [ITU-R-BT-2020-2] を参照してください。

@media (color-gamut: p3) { … }

注: 出力デバイスは、このメディア特性の複数の値に対してtrueを返すことがあります。 それは、デバイスの出力可能な色域全体が十分に大きい場合、 あるいは、ある色域が別のサポートされる色域の部分集合である場合です。 その結果、 この特性は「昇順」の方式で使うのが最適です—​まず(color-gamut: srgb)がtrueのときに基準値を設定し、 次に(color-gamut: p3)がtrueならそれを上書きし、などです。

注: モノクロ表示など一部の出力デバイスは、 srgb 色域でさえサポートできないことがあります。 これらのデバイスをテストするには、 この特性を否定したブール文脈の形式で使用できます: not (color-gamut).

7. インタラクションに関するメディア特性

「インタラクション」メディア特性は、ユーザーがページとどのようにやり取りするかのさまざまな側面を反映します。

pointer および hover 特性は、「主」ポインティングデバイスの特性に関係します。 一方、any-pointer と any-hover は、 利用可能なすべてのポインティングデバイスの特性を問い合わせるために使用できます。

注: 本仕様は、ユーザーエージェントが「主」のポインティングデバイスを どのように決定すべきかを定義しませんが、 期待されるのは、ユーザーエージェントがこの決定を、 実行中のデバイス/環境に関する知識、 利用可能なポインティングデバイスの数と種類、 および、一般的および/または現在どれが使用されているかという概念を組み合わせて行うことです。 デバイスの主要入力機構がポインティングデバイスではないが、 それより使用頻度の低い二次的な入力としてポインティングデバイスがある状況では、 ユーザーエージェントは非ポインティングデバイスを主として扱うことを決定する場合があります（その結果 pointer: none となります）。 ユーザーエージェントはまた、主と見なされるポインティングデバイスの種類を、 ユーザー環境の変化 またはユーザーがUAとどのようにやり取りしているかの変化に応じて、 動的に変更すると決定する場合もあります。

注: pointer、hover、any-pointer、および any-hover 特性は、ポインティングデバイスの特性、 またはその完全な不在のみに関係し、 キーボードのような非ポインティングデバイスの入力機構の存在を検出するためには使用できません。 著者は、これらの特性を問い合わせた際にどの値が一致するかにかかわらず、 非ポインティングデバイス入力が存在し得ることを考慮すべきです。

7.1. ポインティングデバイスの精度: pointer 特性

pointer メディア特性は、マウスのようなポインティングデバイスの有無と精度を問い合わせるために使用されます。 複数のポインティングデバイスが存在する場合、 pointer メディア特性は、 ユーザーエージェントにより決定される「主」のポインティングデバイスの特性を反映しなければなりません。 （利用可能ないずれかのポインティングデバイスの能力を問い合わせるには、 any-pointer メディア特性を参照してください。）

none

デバイスの主要入力機構にポインティングデバイスが含まれません。

coarse

デバイスの主要入力機構に、精度が限定されたポインティングデバイスが含まれます。 例としてタッチスクリーンや動作検出センサー（Xbox向けKinect周辺機器など）があります。

fine

デバイスの主要入力機構に、精度の高いポインティングデバイスが含まれます。 例としてマウス、タッチパッド、描画用スタイラスがあります。

coarse と fine はどちらもポインティングデバイスの存在を示しますが、 精度が異なります。 拡大率1のときに、隣接する複数の小さなターゲットのうち1つを確実に選ぶことが困難または不可能であるようなポインティングデバイスは、 coarse と見なされます。 ズームレベルを変更しても、このメディア特性の値には影響しません。

注: UAはユーザーにズームする能力を提供する場合があり、 また二次的なポインティングデバイスは異なる精度を持つ場合があるため、 このメディア特性の値が coarse であってもユーザーが正確なクリックを行えることがあります。 このメディア特性は、ユーザーが決して正確にクリックできないことを示すのではなく、 それが不便であることのみを示します。 著者は、coarse の値に対して、 正確なクリックに依存せず操作できるようにページを設計することで反応することが期待されます。

アクセシビリティ上の理由により、 ポインティングデバイスが fine と記述できるデバイスであっても、 UAはこのメディアクエリに coarse または none の値を与えることがあります。 これは、ユーザーがポインティングデバイスを正確に、またはまったく操作することに困難があることを示すためです。 さらに、主ポインティングデバイスが fine の精度を持つ場合でも、 ユーザーには追加の coarse なポインティングデバイスが利用可能なことがあります。 著者は、これら他の coarse な潜在的ポインティングデバイスを考慮するために、 any-pointer メディア特性を問い合わせたいと思うかもしれません。

/* 主ポインティングデバイスが不正確な場合、ラジオボタンとチェックボックスを大きくする */
@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width: 30px;
    min-height: 40px;
    background: transparent;
  }
}

7.2. ホバー能力: hover 特性

hover メディア特性は、主ポインティングデバイスを用いてページ上の要素に ホバーできるユーザーの能力を問い合わせるために使用されます。 デバイスに複数のポインティングデバイスがある場合、 hover メディア特性は、 ユーザーエージェントにより決定される「主」のポインティングデバイスの特性を反映しなければなりません。 （利用可能ないずれかのポインティングデバイスの能力を問い合わせるには、 any-hover メディア特性を参照してください。）

none

主ポインティングデバイスがホバーできないこと、 またはポインティングデバイスが存在しないことを示します。 例としてタッチスクリーンや、基本的な描画用スタイラスを使う画面があります。

ホバーできるポインティングデバイスであっても、 それを行うことが不便で、通常の使用方法の一部ではないものも、 この値に一致します。 例えば、長押しがホバーとして扱われるタッチスクリーンは hover: none に一致します。

hover

主ポインティングデバイスがページの一部の上を容易にホバーできることを示します。 例としてマウスや、Nintendo Wiiコントローラのように物理的に画面を指し示すデバイスがあります。

アクセシビリティ上の理由により、ホバーをサポートするデバイスであっても、 UAはこのメディアクエリに hover: none の値を与えることがあります。 これは、ホバーなしでもうまく動作するレイアウトを選択するためです。 主入力機構が hover: hover 能力を持つ場合でも、 ユーザーにはホバー能力を提供しない追加の入力機構が利用可能な場合があることに注意してください。

/* 便利にホバーできるデバイスでのみ、ホバー起動のドロップダウンメニューを使用する。 */
@media (hover) {
  .menu > li        {display:inline-block;}
  .menu ul          {display:none; position:absolute;}
  .menu li:hover ul {display:block; list-style:none; padding:0;}
  /* ... */
}

7.3. 利用可能なすべてのインタラクション能力: any-pointer と any-hover 特性

any-pointer および any-hover メディア特性は、 pointer および hover メディア特性と同一ですが、 ユーザーが利用できるすべてのポインティングデバイスの能力の和集合に対応します。 any-pointer の場合、 異なるポインティングデバイスが異なる特性を持つなら、 複数の値が一致することがあります。

any-pointer および any-hover は、 対応する問い合わせにおいて、すべてのポインティングデバイスが none に一致する場合、 またはポインティングデバイスがまったく存在しない場合にのみ、 none に一致しなければなりません。

付録A: 非推奨のメディア特性

以下のメディア特性は非推奨です。これらは後方互換性のために保持されていますが、 新たに書かれるスタイルシートには適切ではありません。著者はこれらを使用してはなりません。ユーザーエージェントは、指定どおりにこれらをサポートしなければなりません。

ビューポート（またはページメディアにおけるページボックス）のサイズを問い合わせるには、 width、height、および aspect-ratio メディア特性を、 device-width、device-height、および device-aspect-ratio の代わりに使うべきです。後者は、 文書のレイアウトに利用可能な空間にかかわらずデバイスの物理サイズを参照します。 device-* メディア特性は、モバイルデバイスを検出する代理として使われることもあります。 代わりに著者は、スタイル適用の対象としているデバイスの側面をより適切に表すメディア特性を使うべきです。

device-width

device-width メディア特性は、出力デバイスのレンダリング面の幅を記述します。 連続メディアでは、 これはWebに公開される画面領域の幅です。 ページメディアでは、 これは用紙サイズの幅です。

device-width は負の範囲ではfalseです。

@media (device-width < 800px) { … }

注: デバイスが縦向きと横向きのように複数の向きで使用できる場合、 device-* メディア特性は現在の向きを反映します。

device-height

device-height メディア特性は、出力デバイスのレンダリング面の高さを記述します。 連続メディアでは、 これはWebに公開される画面領域の高さです。 ページメディアでは、 これは用紙サイズの高さです。

device-height は負の範囲ではfalseです。

<link rel="stylesheet" media="(device-height > 600px)" />

device-aspect-ratio

device-aspect-ratio メディア特性は、 device-width メディア特性の値と device-height メディア特性の値の比として定義されます。

@media (device-aspect-ratio: 16/9) { … }
@media (device-aspect-ratio: 32/18) { … }
@media (device-aspect-ratio: 1280/720) { … }
@media (device-aspect-ratio: 2560/1440) { … }

変更点

2021年12月25日 勧告候補草案からの変更点

• [Display-P3] の規範参照を確立した。

• layer をメディア型として扱うことを、単に未知のものとして扱うのではなく禁止した。 これはカスケードレイヤーとの互換性のためである。

2020年7月21日 勧告候補からの変更点

• <general-enclosed> において空の関数を許可した（Issue 6803を参照）。

• 文法の定義方法に関する編集上の微調整 （Issue 6806を参照）。

2017年9月5日 勧告候補からの変更点

• speech メディア型を非推奨にした。 メディア型は排他的であるため、スクリーンリーダーに関するものではありえません。 スクリーンリーダーはその名称が示すとおり画面レンディションに基づいて動作するため、 screen メディア型に一致します。 純粋な音声UAに関するものだった可能性はありますが、そのような実装は知られていません。
• トークン解析はASCIIの大文字小文字を区別しないことを思い出させるため、構文仕様への注記参照を追加した
• 比較なしの (width 500px) のような形式を誤って許可していた文法上のバグを修正した
• <ratio> の定義を [CSS-VALUES-4] に委譲した。 これはmediaqueriesだけでなく複数箇所で使われるようになったためである。

  注: [CSS-VALUES-4] は定義を <ratio> = <integer> / <integer> から <ratio> = <number [0,∞]> [ / <number [0,∞]> ]? へと拡張した。

• さまざまな編集上の微調整、表現の改善、明確化。
• 用語continuous media および paged media の定義を追加した。
• 現行UAにその挙動を持つものが欠けているため、 overflow-block の optional-paged 値を削除した。
• update をat riskとしてマークした。

2017年5月19日 作業草案からの変更点

• 範囲型メディア特性を、負の値をパース失敗させるのではなく、 負の範囲ではfalseとするよう変更した。
• color-gamut が必要とする色空間に関する十分な情報を仕様に直接含めた。
• hover、pointer、any-hover、および any-pointer を、もはやat-riskではないとしてマークした。

メディアクエリ レベル3以降の変更点

以下の変更は、2012年6月19日 メディアクエリ レベル3の勧告以降にこの仕様に加えられました:

• 大規模な編集上の書き直しと文書の再構成。
• ブール文脈のメディア特性は、キーワードnoneに対してtrueとなる場合は追加でfalseとなるようになった。
• 数値を持つメディア特性は、 範囲文脈で書けるようになった。
• pointer、any-pointer、hover、any-hover、update、color-gamut、overflow-block、 および overflow-inline メディア特性が追加された。
• or、and、only、および not は、 無効なものを含めメディア型として認識されることが禁止された。 （代わりに構文エラーを引き起こします。）
• screen、print、speech、 および all を除くすべてのメディア型が非推奨となった。
• device-width、device-height、および device-aspect-ratio を非推奨とし、 プライバシーおよびセキュリティ上の理由から、画面ではなくWebに公開される画面領域を参照するようにした。
• mediaqueriesは、場合によってはスタイルシートの評価に依存しうる

謝辞

この仕様は、W3Cのカスケーディングスタイルシート作業グループによる成果物です。

以下の人々からのコメントにより、 Amelia Bellamy-Royds、 Andreas Lind、 Andres Galante、 Arve Bersvendsen、 Björn Höhrmann、 Chris Lilley、 Chris Rebert、 Christian Biesinger、 Christoph Päper、 Dean Jackson、 Elika J. Etemad (fantasai)、 Emilio Cobos Álvarez、 François Remy、 Frédéric Wang、 Greg Whitworth、 Ian Pouncey、 James Craig、 Jinfeng Ma、 Kivi Shapiro、 L. David Baron、 Masataka Yakura、 Melinda Grant、 Michael[tm] Smith、 Nicholas C. Zakas Patrick H. Lauke、 Philipp Hoschka、 Rick Byers、 Rijk van Geijtenbeek、 Roger Gimson、 Sam Sneddon、 Sigurd Lerstad、 Simon Kissane、 Simon Pieters、 Steven Pemberton、 Susan Lesch、 Tantek Çelik、 Thomas Wisniewski、 Vi Nguyen、 Xidorn Quan、 Yves Lafon、 および 張俊芝 が この仕様を改善しました。

セキュリティに関する考慮事項

本仕様に関して、新たなセキュリティ上の考慮事項は報告されていません。

プライバシーに関する考慮事項

メディアクエリは、CSSがページ環境のさまざまな側面を問い合わせることを可能にします。 これには、スクリプトでは見つけることが困難または不可能なものも含まれます。 これは潜在的なプライバシー上の危険であり、 ユーザーのフィンガープリント採取の強化を許し得ますが、 リスクは一般に低いです。 少なくとも、同じ情報はユーザーエージェント文字列を調べることでスクリプト経由でも推測可能であるべきです。 しかし、UA文字列の偽装はメディアクエリには影響しないため、 これはやや堅牢な検出技術となります。

とはいえ、メディアクエリによって得られる情報は比較的粗く、 この点に関してはエントロピーをあまり増やしません。

いくつかのレガシーなメディア特性（device-width、device-height、および device-aspect-ratio）は、 明確な利点がないにもかかわらず、UAが動作している環境についての情報を露出します。 これらは互換性の理由で保持されていますが、 プライバシーおよびセキュリティのため、 UAが不正確な情報を報告することが許容されています。

TAGは、仕様が導入するリスクを評価するために、 編集者および作業グループを支援するセルフレビュー質問票を策定しました。 回答は以下に示します。

この仕様は個人を特定できる情報を扱いますか？

いいえ。

この仕様は高価値データを扱いますか？

いいえ。

この仕様は、閲覧セッションをまたいで持続する新しい状態をオリジンに導入しますか？

いいえ。

この仕様は、持続的なクロスオリジン状態をWebに露出しますか？

いいえ。

この仕様は、オリジンが現在アクセスできない他のデータを露出しますか？

いいえ。

この仕様は、新しいスクリプト実行/読み込み機構を可能にしますか？

いいえ。

この仕様は、オリジンがユーザーの位置情報にアクセスすることを許しますか？

いいえ。

この仕様は、オリジンがユーザーのデバイス上のセンサーにアクセスすることを許しますか？

いいえ。

この仕様は、オリジンがユーザーのローカル計算環境の側面にアクセスすることを許しますか？

はい。上記の本文で説明したとおりです。

この仕様は、オリジンが他のデバイスにアクセスすることを許しますか？

いいえ。

この仕様は、オリジンがユーザーエージェントのネイティブUIに対して何らかの制御を行うことを許しますか？

いいえ。

この仕様は、一時的識別子をWebに露出しますか？

いいえ。

この仕様は、ファーストパーティとサードパーティ文脈の行動を区別しますか？

いいえ。

この仕様は、ユーザーエージェントの「シークレット」モードの文脈でどのように動作すべきですか？

振る舞いの違いは必要ありません。

この仕様は、データをユーザーのローカルデバイスに永続化しますか？

いいえ。

この仕様には「セキュリティに関する考慮事項」および「プライバシーに関する考慮事項」節がありますか？

はい。あなたが現在読んでいるこの節です。

この仕様は、既定のセキュリティ特性を格下げすることを許しますか？

いいえ。