メディアクエリ（Media queries）

RFC2534はほかの一般的な媒体特性を定義している：

いくつかの理由から、これらを直接再利用することはできない：

• はじめの媒体特性"ua-media"はHTML4やCSS2のメディアタイプの一覧としては抽象概念と同じ段階だが、その適用範囲は限られている。今のところは無視されるだろう。
• RFC2534で定義されたメディアの特徴は3つの値の形式をもつ。それらは整数値、論理的な数値、キーワードである。CSSもキーワードを使うが、数字を伴う値、数字と単位（"12px"など）の組み合わせを支持する。
• CSS&FPWGは過去にページの大きさ用の言葉を使うことを考慮していたが、大多数の世界標準があるので、そうしないことに決めた。

4.1. RFC 2506

The Internet Assigned Numbers Authority (IANA) は媒体特性用語の中央記録所を設立し、新しい媒体特性を登録するための手続きはRFC2506で説明されている。RFC2506によると、以前に説明された媒体特性が登録されることは提案されている。

5. Media queries（メディアクエリ）

この文章はCSSとHTMLにメディアクエリを加えることを計画する。メディアクエリはメディアタイプとひとつ以上の媒体特性を伴う表現を含む。ここにHTMLで書かれた簡単な例を示す。

<link rel="stylesheet" media="screen and (color)" href="http://style.com/color">

上記の例は（http://style.com/colorにある）とあるスタイルシートが（カラースクリーンであることという）特徴を持ったメディアタイプ（"Screen")の機器に適合することを示している。

ここに、CSSで書かれた少し複雑な例を示す：

@media print and (min-height: 11in) { 
  IMG { display: none }
}

上記の例は、11インチよりも短い印刷用紙では、IMG属性は印刷されるべきではないという事を示す。

上記の両方の例で、メディアクエリは太字にした。まさに同じ文法をCSSとHTMLの両方で使うことができるということに注意を向けてほしい。

ここにメディアクエリの定義をpseudo-BNFで示した：

media_query: [only | not]? <media_type> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width 
  | height | min-height | max-height
  | monochrome | min-monochrome | max-monochrome 
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | resolution | min-resolution | max-resolution

値の定義は、CSS2を参照しなさい。

"only"と"not"の言葉は遺物のユーザーエージェントがメディアクエリの他の条件を満たしている機器ではないスタイルシートに適合することを避けるため、許される。"only"と"not"はHTML4のメディアタイプでないので、これは正常に作用するだろう。

6. Examples（具体例）

以下は提唱された文法において表現された一般的な例である：

1. スタイルシートは色が使えるすべての機器で使えるということを表す：

   <link rel="stylesheet" media="all and (color)" href="http://....">
   @media all and (color) { ... }
   
   

2. スタイルシートは25cmより幅の広い紙で使えるということを示す：

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

3. 1つ目のスタイルシートはカラー対応の、もう1つは白黒用であることを表す：

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

4. スタイルシートは幅が400から700ピクセルの表示域（文書が表示されている所のスクリーンや紙の部分）を備えた機器で使うことが出来ることを表す：

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

5. スタイルシートは表示域が80文字以上のtty（テレタイプ、ターミナルなど）機器で使うことが出来ることを表す：

   <link rel="stylesheet" media="tty and (min-width: 80ch)" href="...">
   

   "ch"という単位はCSS1/CSS2の部品ではないことに注意しなさい。

6. スタイルシートはスクリーンや、表示域の幅が20emよりも広いならばハンドヘルド機器で使うことが出来ることを表す。

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

   "em"の値は親要素の文字の大きさを基にしている。

7. スタイルシートは300dpiより高解像度の機器で使えることを表す：

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

7. Media features（媒体特性）

この説明は視覚的、触感的な機器で使うことが出来る7つの媒体特性を提唱する。同様に、媒体特性は視覚的な定義されることが出来る。

すべての媒体特性は"min-"や"max-"の制約を表現するための弁解を受け入れる。どんな弁解も無しに、表現は値が0と違えば真を返す。実際は、"coor"や"monochrome"を除くすべての媒体特性は弁解でのみ使われる。

7.1. width（幅）

7.2. height（高さ）

7.3. viewport-aspect-ratio（表示面の縦横比）

7.4. color（色）

"color"媒体特性は色の構成要素のビット数の最小値を持つ。カラー対応機器でなければ、0が返る。例えば、このようにスタイルシートが全てのカラー対応機器に適合することを表す：

@media all and (color) { ... }

このようにスタイルシートが2ビット以上のカラー対応機器に適合することを表す：

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

例えば、8ビットカラーのシステムが3ビットで赤を、3ビットで緑を、2ビットで青を表現するならば、"color"媒体特性は2の値をもつだろう。

インデックスカラーを持つ機器では、"color"媒体特性はカラーテーブルの構成要素のビット数の最小値を返すだろう。

描画された機能は表面的な段階で色の能力を説明できるだけではない。もしはるかに離れた機能が要求されれば、RFC2531（インターネットファックスのためのスキーマの内容）はより明確なメディアクエリを供給する。例：CIELAB-L-depth CIELAB-a-depth CIELAB-b-depth CIELAB-L-min CIELAB-L-max

7.5. color-index（索引をつけられた色）

"color-index"媒体特性は色の一覧表に入力された数を持つ。もし機器が索引をつけられた色を持つ機器でなければ、0が返る。例えば、このようにスタイルシートが全てのインデックスカラーを持った機器に適応することを表す：

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

このようにスタイルシートが256以上のインデックスカラーを持つ機器に適合することを表す：

@media all and (min-color-index: 256) { ... }

7.6. monochrome（白黒）

"monochrome"媒体特性は白黒のフレームバッファの1ピクセル当たりのビット数の数を持つ。もし機器が白黒の機器でなければ、0を返す。例えば、このようにスタイルシートが全ての白黒の機器に適合することを表す：

@media all and monochrome { ... }

このようにスタイルシートが1ピクセル当たり2ビット以上の白黒の機器に適合することを表す：

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

7.7. resolution（解像度）

"li"という単位はTVの見える水平線の数を表す。（例えば"height: 575px"などの）高さのプロパティを使うのと同等の機能を表すことは可能である。これはまだ明らかになっていない。

7.8. scan（走査による画像）

8. New units（新しい単位）

以下に述べられた単位はある媒体特性では有効であるが、ほかのCSSの状況では利用できるかもしれないしできないかもしれない。

• ch
• dpi
• li