【注意】このドキュメントは、W3CのMedia Queries Level 3 W3C Recommendation, 05 April 2022の和訳です。
このドキュメントの正式版はW3Cのサイト上にある英語版であり、このドキュメントには翻訳に起因する誤りがありえます。誤訳、誤植などのご指摘は、訳者までお願い致します。

First Update: 2024年1月10日

メディア・クエリレベル3

W3C勧告 2022年4月5日

このドキュメントの詳細

本バージョン:: https://www.w3.org/TR/2022/REC-mediaqueries-3-20220405/
最新バージョン:: https://www.w3.org/TR/mediaqueries-3/
最新編集者バージョン:: https://drafts.csswg.org/mediaqueries-3/
旧バージョン:: https://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/
履歴:: https://www.w3.org/standards/history/mediaqueries-3
コメントの処理:: http://www.w3.org/Style/2012/MediaQueriesDisposalOfComments.html
実装報告書:: https://test.csswg.org/harness/results/mediaqueries-3_dev/grouped/
編集者:: Florian Rivoal (招待専門家)
旧編集者:: Håkon Wium Lie <howcome @opera.com>; Tantek Çelik <tantek @cs.stanford.edu>; Daniel Glazman <daniel.glazman @disruptive-innovations.com>; Anne van Kesteren <annevk@opera.com>
フィードバック:: この仕様の議論にはGitHubの課題をお勧めします。課題を提出する際は、「[mediaqueries-3] …summary of comment…」のように、タイトルに「mediaqueries-3」という文字列を入れてください。すべての課題とコメントはアーカイブされ、履歴アーカイブもあります。
正誤表:: http://www.w3.org/Style/2022/REC-mediaqueries-3-20220405-errata.html

要約

HTML4とCSS2は現在、様々なメディア・タイプに応じたメディア依存のスタイル・シートをサポートしています。例えば、あるドキュメントでは、画面上での表示にはsans-serifフォントを用い、印刷時にはserifフォントを用いることができます。「screen」と「print」は、2つの定義済みのメディア・タイプです。メディア・クエリは、スタイル・シートをより精緻にラベル付けできるようにすることにより、メディア・タイプの機能を拡張します。

メディア・クエリは、メディア・タイプと、特定のメディア特性の条件をチェックする0以上の式で構成されます。メディア・クエリで使用できるメディア特性には、「width」(幅)、「height」(高さ)、「color」(色)などがあります。メディア・クエリを用いることで、コンテンツ自体を変更せずに、表示を固有の出力デバイスの範囲に合わせることができます。

このドキュメントのステータス

この項は、このドキュメントの公開時のステータスについて記述しています。現行のW3Cの刊行物およびこの技術報告の最新の改訂版のリストは、https://www.w3.org/TR/のW3C技術報告インデックスにあります。

このドキュメントは、CSSワーキンググループが勧告トラックを用いて勧告として公開しました。これには、修正案が含まれています。

W3C勧告は、広範な合意形成の後、W3Cとそのメンバーの協賛を得て、ワーキンググループのメンバーから実装のためのロイヤルティ・フリーのライセンスを約束された仕様です。この勧告の将来の更新では、新しい機能を組み込む可能性があります。

W3Cは、この仕様をウェブの標準として広く展開することを推奨します。

「[mediaqueries-3] …summary of comment…」のように、タイトルに仕様コード「mediaqueries-3」を含めて、GitHubに課題を登録してフィードバックを送信してください(推奨)。すべての課題とコメントはアーカイブされます。あるいは、フィードバックを(アーカイブされた)公開メーリング・リストwww-style@w3.orgに送信することもできます。コメントの期限は、2022年6月5日までです。

このドキュメントは、2021年11月2日のW3Cプロセス・ドキュメントによって管理されています。

このドキュメントは、W3C特許方針の下で活動しているグループによって作成されました。W3Cは、このグループの成果物に関連するあらゆる特許の開示の公開リストを維持し、このページには特許の開示に関する指示も含まれています。不可欠な請求権(Essential Claim(s))を含んでいると思われる特許に関して実際に知っている人は、W3C特許方針の6項に従って情報を開示しなければなりません。

修正案はドキュメント内に記しています。

1. 背景

(この項は規範的ではありません。)

HTML4[HTML401]およびCSS2[CSS21]は現在、様々なメディア・タイプに応じたメディア依存のスタイル・シートをサポートしています。例えば、あるドキュメントで、画面と印刷に異なるスタイル・シートを使用できます。HTML4では、これは次のように記述できます。

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

CSSスタイル・シート内では、特定のメディア・タイプを適用する部分を宣言できます。

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

HTML4では「print」(印刷)と「screen」(画面)のメディア・タイプが定義されています。HTML4のメディア・タイプを全て列挙すると、「aural」(音声合成)、「braille」(点字)、「handheld」(携帯端末)、「print」(印刷)、「projection」(プロジェクタ)、「screen」(画面)、「tty」(固定文字幅)、「tv」(テレビ)です。CSS2では同じリストを定義しつつ、「aural」を非推奨とし、「embossed」(点字印刷)と「speech」(音声合成)を追加しています。さらに、「all」(すべて)は、すべてのメディア・タイプにスタイル・シートが適用されることを示すために用いられます。

メディア固有のスタイル・シートは、複数のユーザ・エージェントでサポートされます。最も一般的に用いられる機能は、「screen」と「print」を区別するというものです。

どの種類の出力デバイスにスタイル・シートを適用するかをより詳細に記述する方法が要望されていました。幸い、HTML4はこれらの要望を予期し、メディア・タイプに対し上位互換性のある構文を定義していました。ここで、HTML4の6.13項を引用します。

HTMLの将来のバージョンでは、新しい値が導入される可能性や、パラメター化された値が認められる可能性があります。これらの拡張を導入できるようにするためには、適合するユーザ・エージェントは、次のようにmedia属性値を解析できなければなりません。
値は、コンマで区切られた項目のリストにします。例えば、
media="screen, 3d-glasses, print and resolution > 90dpi"
は、次のとおりにマッピングされます。
"screen"
"3d-glasses"
"print and resolution > 90dpi"
各項目は、US ASCII文字[a-zA-Z](Unicodeの10進の65～90、97～122)、数字[0-9](Unicodeの16進の30～39)、またはハイフン(45)以外の最初の文字の直前で切り捨てられます。ここの例では、次のとおりとなります。
"screen"
"3d-glasses"
"print"

この仕様で記述しているメディア・クエリは、HTML4で記述されているメカニズムを基礎としています。メディア・クエリの構文は、HTML4で予約されているメディア・タイプの構文に適合しています。HTML4のmedia属性は、XHTMLや一般的なXMLにも存在しています。同じ構文は、CSSの「@media」と「@import」の規則内でも使用できます。

しかし、メディア・クエリの解析規則は、CSSで用いられるメディア・クエリとの整合性を保つため、HTML4の規則とは互換性がありません。

HTMLの新しいバージョン[HTML]は、メディア・クエリの仕様を直接参照しており、したがって、HTMLの規則を更新しています。

2. メディア・クエリ

メディア・クエリは、メディア・タイプと、特定のメディア特性の条件をチェックする0以上の式で構成されます。

この項のメディア・クエリに関する記述は、構文の項に従っていることを前提としています。構文に準拠していないメディア・クエリについては、エラー処理の項で論じます。つまり、この項の要件よりも構文が優先されます。

HTMLで記述したシンプルな例です。

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

この例は、あるスタイル・シート(example.css)が、ある特性を有するメディア・タイプ(「screen」)のデバイスに適用される(カラー画面でなければならない)ことを表します。

同じメディア・クエリをCSSの@import規則で記述したものです。

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

メディア・クエリは、true(真)かfalse(偽)かの論理式です。メディア・クエリのメディア・タイプが、ユーザ・エージェントが動作しているデバイスのメディア・タイプ(「Applies to」の行で定義されている)と一致し、そのメディア・クエリ内のすべての式がtrue(真)である場合、メディア・クエリはtrue(真)です。

すべてのメディア・タイプに適用されるメディア・クエリには、省略構文が用意されており、「all」というキーワードは、(末尾の「and」とともに)省略できます。つまり、メディア・タイプが明示されていない場合は「all」です。

つまり、次の2つは同じです。:

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

次の2つも同じです。

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

複数のメディア・クエリを組み合わせて1つのメディア・クエリのリストにすることができます。これは、コンマ区切りのメディア・クエリのリストです。コンマ区切りのリスト内の1つ以上のメディア・クエリがtrue(真)の場合、リスト全体がtrue(真)となり、そうでない場合はfalse(偽)です。メディア・クエリ構文では、コンマは論理和を表し、「and」というキーワードは論理積を表します。

CSSの@media規則を用いて、コンマ区切りのリストで複数のメディア・クエリを記述した例です。

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

メディア・クエリのリストが空(つまり、宣言が空の文字列または余白のみで構成される)の場合、true(真)となります。

つまり、次の2つは同等です。

@media all { … }
@media { … }

論理否定は、notというキーワードで表現できます。メディア・クエリの先頭に「not」というキーワードがあれば、結果は否定されます。つまり、「not」というキーワードがないメディア・クエリがtrue(真)であれば、false(偽)になり、その逆も同じです。(HTML4で記述されている)メディア・タイプのみをサポートしているユーザ・エージェントは、「not」というキーワードを認識せず、したがって、関連付けられているスタイル・シートは適用されません。

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

「only」というキーワードを用いて、古いユーザ・エージェントからスタイル・シートを見えなくすることもできます。ユーザ・エージェントは、「only」で始まるメディア・クエリを、「only」というキーワードが存在していないかのように処理しなければなりません。

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

メディア・クエリ構文は、HTML、XHTML、XML[XMLSTYLE]、CSSの@importおよび@mediaの規則で使用できます。

同じクエリをHTML、XHTML、XML、@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) { … }

[XMLSTYLE]仕様では、media疑似属性でメディア・クエリを用いるようにする更新はまだ行われていません。

メディア特性が、ユーザ・エージェントが動作しているデバイスに当てはまらない場合、そのメディア特性に関する式はfalse(偽)となります。

「device-aspect-ratio」というメディア特性は、視覚デバイスにのみ適用されます。したがって、音声合成デバイスでは、「device-aspect-ratio」が含まれる式は常にfalse(偽)になります。

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

測定単位がデバイスに当てはまらない場合、式は常にfalse(偽)となります。

「px」という単位は、「speech」デバイスには適用されず、したがって、次のメディア・クエリは常にfalse(偽)です。

<link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />

「not」というキーワードがメディア・クエリの先頭に追加されれば、この例のメディア・クエリがtrue(真)となることに注意してください。

循環依存を回避するため、他の特性がメディア・クエリの解決に影響することを明示的に規定していなければ、式を評価するためにスタイル・シートを適用する必要は全くありません。例えば、印刷したドキュメントの縦横比は、スタイル・シートの影響を受けるかもしれませんが、「device-aspect-ratio」に関する式は、ユーザ・エージェントのデフォルトの縦横比に基づくでしょう。

ユーザ・エージェントは、例えば、デバイスがランドスケープ(横長)モードからポートレート(縦長)モードに変更されるなど、ユーザ環境の変化に応じてページを再評価し再レイアウトすることが期待されますが、それは必須ではありません。

3. 構文

メディア・クエリ構文は、CSS2の文法で記述されます。そのため、ここで定義していない規則は、CSS2で定義されています。以下で定義しているmedia_query_list生成規則は、CSS2のmedia_list生成規則を置き換えるものです。[CSS21]

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;
media_feature
 : IDENT
 ;

CSS2で定義されているCOMMENTトークンは、(可読性を確保するために)文法内には出現しませんが、これらのトークンは、他のトークンの間のどこにでも、何度でも出現できます。[CSS21]

次の新しい定義が導入されます。

L  l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
Y  y|\\0{0,4}(59|79)(\r\n|[ \t\r\n\f])?|\\y

次の新しいトークンが導入されます。

{O}{N}{L}{Y}      {return ONLY;}
{N}{O}{T}         {return NOT;}
{A}{N}{D}         {return AND;}
{num}{D}{P}{I}    {return RESOLUTION;}
{num}{D}{P}{C}{M} {return RESOLUTION;}

RESOLUTIONが、CSS2のterm生成規則に追加されます。

CSSスタイル・シートは一般的に、ASCIIの大文字・小文字を区別せず、これはメディア・クエリでも同じです。

構文への適合に加えて、個々のメディア・クエリが適合しているとみなされるためには、それぞれの仕様に従ってメディア・タイプとメディア特性を使用する必要があります。

次の例には「example」というメディア・タイプが存在しないため、最初のメディア・クエリのみが適合しています。

@media all { body { background:lime } }
@media example { body { background:red } }

3.1. エラー処理

適合しないメディア・クエリについては、ユーザ・エージェントは、この項で記述している規則に従う必要があります。

修正案1: 「not」、「and」、「only」、「or」というキーワードは未知のメディア・タイプとしてではなく、メディア・タイプの代わりに用いられた場合の構文エラーとして扱われるべきであることを明確化しました。

この変更の理由は、2013-05-30のCSS WGの遠隔会議の議事録と、そこから参照されたメールにあります。

この変更にはテストがある

この変更に対するテストがWPTに追加されました。結果はwpt.fyiで見ることができます。

未知のメディア・タイプ。未知のメディア・タイプは、false(偽)となります。事実上、デバイスのメディア・タイプと一致しない既知のメディア・タイプと同じように扱われます。しかし、「not」、「and」、「only」、「or」というメディア・タイプには例外が設けられています。これらは、IDENT生成規則にマッチしたとしても未知のメディア・タイプとして扱ってはならず、むしろ不正なクエリー節を発生させます。

「unknown」というメディア・クエリは、unknownが実際にサポートされているメディア・タイプでなければfalse(偽)となります。同様に、「not unknown」はtrue(真)となるでしょう。
次の記述は、メディア・タイプとして「only」と「or」を用いているため、不正なメディア・クエリです。
```
@media only and or { … }
```
未知のメディア・タイプは、IDENT生成規則と実際に一致しないメディア・タイプとは異なります。これらは、不正なメディア・クエリ節に該当します。
未知のメディア特性。ユーザ・エージェントは、指定されたメディア特性の1つが未知である場合に、メディア・クエリを「not all」と表します。
```
<link rel="stylesheet" media="screen and (max-weight: 3kg) and (color), (color)" href="example.css" />
```
この例では、最初のメディア・クエリは「not all」と表され、false(偽)となります。そして、2番目のメディア・クエリは、実質的に最初のクエリが指定されなかったかのように評価されます。
```
@media (min-orientation:portrait) { … }
```
「orientation」特性では「min-」という接頭辞が認められていないため、このクエリは「not all」と表されます。
未知のメディア特性値。未知のメディア特性と同様に、ユーザ・エージェントは、指定されたメディア特性の値の1つが未知である場合に、メディア・クエリを「not all」と表します。

(color:20example)というメディア・クエリは、「color」というメディア特性に対して未知の値を指定しており、したがって、「not all」と表されます。
「width」というメディア特性に負の長さは認められていないため、次のメディア・クエリは「not all」と表されます。
```
@media (min-width: -100px) { … }
```
不正なメディア・クエリ。ユーザ・エージェントは、()、[]、{}、""、''という対のマッチング規則に従ったり、エスケープを適切に処理したりしながら、メディア・クエリの最後まで読んでメディア・クエリを解析している間に遭遇した予期しないトークンを処理する必要があります。予期しないトークンを含んだメディア・クエリは「not all」と表されます。[CSS21]
```
@media (example, all,), speech { /* only applicable to speech devices */ }
@media &test, screen           { /* only applicable to screen devices */ }
```
下記は、「and」と式との間に空白がないことが認められていないため、不正なメディア・クエリです。(これは、関数表記の構文用に予約されています。)
```
@media all and(color) { … }
```
メディア・クエリは、ホスト言語のエラー処理規則にも従うことが期待されます。
```
@media test;,all { body { background:lime } }
```
…は、CSSではセミコロンが@media規則を終了させるため、適用されません。

4. メディア特性

メディア特性は、構文的にCSSのプロパティーと似ています。これらには名前があり、特定の値が認められています。しかし、プロパティーとメディア特性にはいくつかの大きな違いがあります。

プロパティーは、宣言で用いられ、ドキュメントの表現方法に関する情報を提供します。メディア特性は、式で用いられ、出力デバイスの要件を記述します。
ほとんどのメディア特性では、「～以上」や「～以下」の制約を表現するために、オプションの「min-」や「max-」の接頭辞が認められています。この構文は、HTMLやXMLと衝突する可能性がある「<」や「>」の文字を避けるために用います。接頭辞が認められているこれらのメディア特性は、接頭辞とともに用いるのが最も一般的ですが、単独で用いることもできます。
プロパティーは、宣言を形成するために常に値を必要とします。一方、メディア特性は、値なしで用いることもできます。メディア特性のfeatureの場合、0または単位識別子付きの0ではない(つまり、0、0px、0emなどではない)値xに対して(feature:x)がtrue(真)となる場合に、(feature)はtrue(真)となります。min/maxの接頭辞が付いたメディア特性は、値なしでは使用できません。min/maxの接頭辞が付いたメディア特性を値なしに用いれば、メディア・クエリは不正になります。
プロパティーでは、例えば、他の複数の値が含まれる計算式などの複雑な値が認められています。メディア特性では、1つのキーワード、1つの数、単位識別子付きの1つの数などの、1つの値しか認められていません。(唯一の例外は、「aspect-ratio」と「device-aspect-ratio」のメディア特性です。)

例えば、「color」というメディア特性は、値がない式(「(color)」)になったり、値がある式((min-color: 1))になったりする可能性があります。

この仕様では、視覚および聴覚デバイスで使用可能なメディア特性を定義しています。同様に、メディア特性は、聴覚メディア・タイプに対しても定義できます。

4.1. width

値: <length>
適用対象: 視覚メディア・タイプおよび聴覚メディア・タイプ
min/max接頭辞: 認める

「width」メディア特性は、出力デバイスの対象表示領域の幅を記述します。連続メディアの場合、これは、表示されるスクロール・バー(もしあれば)のサイズを含むビューポート(CSS2の9.1.1項[CSS21]に記述されている)の幅です。ページ型メディアの場合、これは、ページ・ボックス(CSS2の13.2項[CSS21]に記述されている)の幅です。

<length>には負の値を指定できません。

例えば、このメディア・クエリは、25cm以上の幅の印刷物でスタイル・シートを使用できることを表します。

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

このメディア・クエリは、ビューポート(画面/紙のドキュメントが表示される部分)の幅が400～700ピクセルのデバイスでスタイル・シートを使用できることを表します。

@media screen and (min-width: 400px) and (max-width: 700px) { … }

このメディア・クエリは、ビューポートの幅が20em以上である場合に、画面と携帯端末でスタイル・シートを使用できることを表します。

@media handheld and (min-width: 20em),
  screen and (min-width: 20em) { … }

「em」という値は、「font-size」の初期値と相対的です。

4.2. height

値: <length>
適用対象: 視覚メディア・タイプおよび聴覚メディア・タイプ
min/max接頭辞: 認める

「height」メディア特性は、出力デバイスの対象表示領域の高さを記述します。連続メディアの場合、これは、表示されるスクロール・バー(もしあれば)のサイズを含むビューポートの高さです。ページ型メディアの場合、これは、ページ・ボックスの高さです。

<length>には負の値を指定できません。

4.3. device-width

値: <length>
適用対象: 視覚メディア・タイプおよび聴覚メディア・タイプ
min/max接頭辞: 認める

「device-width」メディア特性は、出力デバイスの描画面の幅を記述します。連続メディアの場合、これは、画面の幅です。ページ型メディアの場合、これは、ページ・シート・サイズの幅です。

<length>には負の値を指定できません。

@media screen and (device-width: 800px) { … }

上記の例では、現在表示している幅がちょうど800ピクセルである画面にのみスタイル・シートが適用されます。単位の項で述べているように、「px」という単位は、論理的な単位です。

4.4. device-height

値: <length>
適用対象: 視覚メディア・タイプおよび聴覚メディア・タイプ
min/max接頭辞: 認める

「device-height」メディア特性は、出力デバイスの描画面の高さを記述します。連続メディアの場合、これは、画面の高さです。ページ型メディアの場合、これは、ページ・シート・サイズの高さです。

<length>には負の値を指定できません。

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

上記の例では、高さがちょうど600ピクセルの画面にのみスタイル・シートが適用されます。「px」という単位の定義が他のCSSと同じであることに注意してください。

4.5. orientation

値: portrait | landscape
適用対象: ビットマップ・メディア・タイプ
min/max接頭辞: 認めない

「height」メディア特性の値が「width」メディア特性の値より大きい場合、「orientation」メディア特性は「portrait」です。そうでない場合は、「orientation」は「landscape」です。

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

4.6. aspect-ratio

値: <ratio>
適用対象: ビットマップ・メディア・タイプ
min/max接頭辞: 認める

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

4.7. device-aspect-ratio

値: <ratio>
適用対象: ビットマップ・メディア・タイプ
min/max接頭辞: 認める

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

例えば、正方画素を有する画面デバイスが、横1280ピクセル、縦720ピクセル(一般に「16:9」と呼ばれる)である場合、次のメディア・クエリはすべて、そのデバイスと一致します。

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

4.8. color

値: <integer>
適用対象: 視覚メディア・タイプ
min/max接頭辞: 認める

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

<integer>には負の値を指定できません。

例えば、これらの2つのメディア・クエリは、すべてのカラー・デバイスにスタイル・シートが適用されることを表します。

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

このメディア・クエリは、カラー・コンポーネントあたり2ビット以上のカラー・デバイスにスタイル・シートが適用されることを表します。

@media all and (min-color: 2) { … }

異なるカラー・コンポーネントが異なるビット数で表されている場合、最も小さい数が用いられます。

例えば、8ビットのカラー・システムが、赤のコンポーネントを3ビット、緑のコンポーネントを3ビット、青のコンポーネントを2ビットで表す場合、「color」メディア特性の値は2になります。

インデックス・カラーを持つデバイスでは、参照テーブル内のカラー・コンポーネントあたりの最小ビット数が用いられます。

ここで記述している機能は、表面的なレベルでしか色性能を記述できません。これ以上の機能が必要である場合、今後サポートされる可能性があるより詳細なメディア特性がRFC2531[RFC2531]で提供されています。

4.9. color-index

値: <integer>
適用対象: 視覚メディア・タイプ
min/max接頭辞: 認める

「color-index」メディア特性は、出力デバイスのカラー参照テーブルの項目数を記述します。デバイスがカラー参照テーブルを用いない場合、値は0です。

<integer>には負の値を指定できません。

例えば、次の2つは、すべてのカラー・インデックス・デバイスにスタイル・シートが適用されることを表す方法です。

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

このメディア・クエリは、256以上の項目を持つカラー・インデックス・デバイスにスタイル・シートが適用されることを表します。

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

4.10. monochrome

値: <integer>
適用対象: 視覚メディア・タイプ
min/max接頭辞: 認める

「monochrome」メディア特性は、白黒のフレーム・バッファーにおけるピクセルあたりのビット数を記述します。デバイスが白黒デバイスでない場合、出力デバイスの値は0です。

<integer>には負の値を指定できません。

例えば、次の2つは、すべての白黒デバイスにスタイル・シートが適用されることを表現する方法です。

@media all and (monochrome) { … }
@media all and (min-monochrome: 1) { … }

これは、ピクセルあたり2ビット以上の白黒デバイスにスタイル・シートが適用されることを表します。

@media all and (min-monochrome: 2) { … }

これは、カラー・ページ用に1つのスタイル・シートと、白黒用にもう1つのスタイル・シートがあることを表します。

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

4.11. resolution

値: <resolution>
適用対象: ビットマップ・メディア・タイプ
min/max接頭辞: 認める

「resolution」メディア特性は、出力デバイスの解像度、つまり、ピクセル密度を記述します。正方形ではないピクセル値を持つデバイスにクエリを実行する際には、指定された値を、「min-resolution」クエリでは最小密度と、また、「max-resolution」クエリでは最大密度と比べなければなりません。(「min-」や「max-」の接頭辞がない)「resolution」クエリは、正方形でないピクセル値を持つデバイスと一致しません。

プリンタの場合は、これは、スクリーン解像度(任意の色のドットを印刷する解像度)に対応します。

例えば、このメディア・クエリは、300dpi以上の解像度を持つデバイスでスタイル・シートを使用できることを表します。

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

このメディア・クエリは、118dpcm以上の解像度を持つデバイスでスタイル・シートを使用できることを表します。

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

4.12. scan

値: progressive | interlace
適用対象: 「tv」メディア・タイプ
min/max接頭辞: 認めない

「scan」メディア特性は、「tv」という出力デバイスの走査処理方法を記述します。

例えば、このメディア・クエリは、プログレッシブ・スキャン方式のtvデバイスでスタイル・シートを使用できることを表します。

@media tv and (scan: progressive) { … }

4.13. grid

値: <integer>
適用対象: 視覚メディア・タイプおよび聴覚メディア・タイプ
min/max接頭辞: 認めない

「grid」メディア特性は、出力デバイスがグリッドであるかビットマップであるかのクエリを行うために用います。出力デバイスがグリッドに基づいている(例えば、「tty」端末や、1つの固定フォントのみを持つ電話のディスプレイなど)場合、値は1です。そうでない場合は、値は0です。

0と1のみが有効な値です。(-0も含まれます。)したがって、これら以外は、すべて不正なメディア・クエリとなります。

2つの例を示します。

@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (max-device-height: 7em) { … }

5. 値

この仕様では、2つの新しい値も導入しています。

<ratio>という値は、正の<integer>(0または負ではない)で、その後にオプションで空白が続き、その後に斜線(「/」)が続き、その後にオプションで空白が続き、その後に正の<integer>が続きます。

<resolution>という値は、正の<number>で、直後に単位識別子(「dpi」または「dpcm」)が続きます。

この仕様で用いる空白、<integer>、<number>やその他の値は、CSS 2.1で規範的に定義されている他のCSSと同じです。[CSS21]

6. 単位

メディア・クエリで使用する単位は、他のCSSと同じです。例えば、ピクセルの単位は、物理的なピクセルではなく、CSSピクセルを表します。

メディア・クエリの相対的な単位は、初期値に基づきます。これは、単位が宣言の結果に基づかないことを意味します。例えば、HTMLでは、「em」という単位は「font-size」の初期値と相対的です。

6.1. 解像度

「dpi」と「dpcm」という単位は、出力デバイスの解像度、つまり、デバイスのピクセル密度を記述します。解像度の単位識別子は次のとおりです。

dpi: CSSの「inch」あたりのドット数
dpcm: CSSの「centimeter」あたりのドット数

この仕様では、これらの単位は「resolution」メディア特性でのみ用いられます。

7. 変更点

7.1. 2012年6月19日勧告以後の変更

修正案を導入しました。

3.1項の修正案1: 「not」、「and」、「only」、「or」というキーワードは未知のメディア・タイプとしてではなく、メディア・タイプの代わりに用いられた場合の構文エラーとして扱われるべきであることを明確化した。

また、いくつかの編集やマークアップの修正も行いました。

2項: 例の冗長な属性を削除した。

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

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

2項: 他の仕様がこの仕様を拡張しやすくするために文を調整した。
循環依存を回避するため、他の特性がメディア・クエリの解決に影響することを明示的に規定していなければ、式を評価するためにスタイル・シートを適用する必要は全くありません。
3項: cssの構文の特徴を示すため、(規範的な文ではなく) 説明的な文で、より正確な用語を用いた。
CSSスタイル・シートは一般的に、~~大文字・小文字を区別せず~~ASCIIの大文字・小文字を区別せず、これはメディア・クエリでも同じです。
この主張の真実性はテストによって検証されます。

4.13項: 例の構文エラーを訂正した。

@media handheld and (grid) and (device-max-heightmax-device-height: 7em) { … }

参考文献が最新版を指すように更新した。
仕様全体の様々なリンクをhttpからhttpsに更新した。

7.2. 2010年7月27日勧告候補以後の変更

2010年7月27日勧告候補以後、本仕様に以下の変更を加えました。

4.11項: ドットの意味が曖昧であったプリンターの場合の解像度の意味を明確化した。

プリンタの場合は、これは、スクリーン解像度(任意の色のドットを印刷する解像度)に対応します。
6.1項: 言及した「inch」と「cm」はCSSの単位であり、物理的な単位ではないことを明確化した。

dpi
CSSの「inch」~~inch~~あたりのドット数
dpcm
CSSの「centimeter」cmあたりのドット数
4.1項: 誤った非規範的な文言を6項の正しい規範的な文言に合わせた。

「em」という値は、~~ルート要素のフォント・サイズ~~「font-size」の初期値と相対的です。
6項: 単位が宣言の結果に基づかないことを明確化した。

メディア・クエリの相対的な単位は、初期値に基づきます。これは、単位が宣言の結果に基づかないことを意味します。例えば、HTMLでは、「em」という単位は「font-size」の初期値と相対的です。

謝辞

この仕様は、W3Cのカスケーディング・スタイル・シートのワーキンググループの成果です。

Bjorn Hohrmann、Christoph Paper、Chris Lilley、Simon Pieters、Rijk van Geijtenbeek、Sigurd Lerstad、Arve Bersvendsen、Susan Lesch、Philipp Hoschka、Roger Gimson、Steven Pemberton、Simon Kissane、Melinda Grant、L. David Baronからのコメントによってこの仕様を改善しました。

参考文献

規範的な参考文献


[CSS21]: Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

その他の参考文献


[HTML401]: Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999, superseded 27 March 2018. W3C Recommendation. URL: https://www.w3.org/TR/2018/SPSD-html401-20180327/
[HTML]: Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[RFC2531]: G. Klyne; L. McIntyre. Content Feature Schema for Internet Fax. March 1999. Internet RFC 2531. URL: http://www.ietf.org/rfc/rfc2531.txt
[XMLSTYLE]: James Clark; Simon Pieters; Henry S. Thompson Associating Style Sheets with XML documents 1.0 (Second Edition) 28 October 2010. W3C Recommendation. URL: http://www.w3.org/TR/2010/REC-xml-stylesheet-20101028/

メディア・クエリ レベル3

要約

このドキュメントのステータス

1. 背景

2. メディア・クエリ

3. 構文

3.1. エラー処理

4. メディア特性

4.1. width

4.2. height

4.3. device-width

4.4. device-height

4.5. orientation

4.6. aspect-ratio

4.7. device-aspect-ratio

4.8. color

4.9. color-index

4.10. monochrome

4.11. resolution

4.12. scan

4.13. grid

5. 値

6. 単位

6.1. 解像度

7. 変更点

7.1. 2012年6月19日勧告以後の変更

7.2. 2010年7月27日勧告候補以後の変更

謝辞

参考文献

規範的な参考文献

その他の参考文献

メディア・クエリレベル3