メディアクエリー

概要

HTML4 と CSS2 は、異なる 媒体型 (media types) 用に調整された、媒体固有のスタイルシートに対応しています。この機能を利用するとたとえば、画面上ではサンセリフ体、印刷時にはセリフ体といったスタイルシートの作成が可能になります。この例では ‘screen’ と ‘print’ という、定義済みの媒体型を利用しています。メディアクエリー (Media queries) とはこの機能を拡張し、より細かなスタイルシートのラベル付けを行えるようにするものです。

メディアクエリーは媒体型と、スタイルシートの適用範囲を制限する 0 以上の式 (expressions) から成り立ちます。メディアクエリーで使用できる 媒体特性 (media features) には ‘width’、‘height’、‘color’ などがあります。メディアクエリーを利用することにより、内容を変えることなく特定の出力デバイスごとにスタイルを調整することができるようになります。

この文書のステータス

CSS WGは前回の草案から変更された箇所について、意見を求めています。

• 構文に関するセクションの改訂。
• 媒体特性 ‘aspect-ratio’、‘orientation’ の追加。

この章は、この文書の公開時におけるステータスについて説明しています。このため、他の仕様がこの文書を上書きしている可能性があります。W3C による他の出版物およびこの技術レポートの最新版は W3C 技術レポートインデックス (http://www.w3.org/TR/) で探すことができます。

ワーキングドラフトとしての仕様書公開は、W3C メンバーによる支持を意味するものではありません。この文書は更新されたり他の文書と置き換えられたり、また破棄される可能性もある草稿段階の仕様書です。策定中ということを明記せずに、この文書を引用することは適当でありません。

この仕様に関する議論は、公開メーリングリスト (アーカイブ) で行われています (議論への参加の前に、参加手順 をお読みください)。E メールを送るときには、件名に “css3-mediaqueries” という文字を含めてください。たとえば、“[css3-mediaqueries] …summary of comment…” というスタイルが適当です。

この文書は CSS ワーキンググループ (Style Activity) により作成されました。

この文書は 5 February 2004 W3C Patent Policy の下で活動するグループにより作成されました。W3C は 特許情報の開示に関する公開リスト を関連する団体と共に、その成果物とあわせて管理しています。リストには情報開示に関する説明もありますので、ご参照ください。特許について十分に知識のある人物が、当該仕様に関し Essential Claim(s) が認められると判断した場合は、W3C 特許方針の第 6 章 に従い情報を開示する必要があります。

この仕様書は最終草案 (Last Call Working Draft) です。すべての方は、この文書を読み、コメントを www-style メーリングリストに送信することが望まれています。コメントの最終期限 (deadline for comments) は 2008 年 11 月 21 日です。

この仕様が CR ステージを通過した時点で、次のような条件がそろっているものとします。

1. 少なくとも二つの、相互運用可能な実装が存在しています。これを評価基準とするため、ここでは次の用語を定義します。

   相互運用可能 (interoperable)

   CSS テストスイートの各テストケースをパスします。もし実装が Web ブラウザでなければ、そのテストスイートと同等なテストをパスします。そのようなユーザーエージェント (UA) が相互運用性を主張するために利用される場合、テストスイート内の該当するテストには、それぞれ代替となるテストが用意されるべきです。また、そのような UA が相互運用性を主張するために利用される場合、同じように相互運用性を主張する別の UA が一つ以上存在し、また関連するテストを通る必要があります。このとき、関連するテストは査読を行いやすいよう、パブリックな場所で公開される必要があります。

   実装 (implementation)

   次のようなユーザーエージェントが、実装と呼ばれることになります。

   1. 仕様を実装している。
   2. 公開されている (パブリックな場所でダウンロードできる、または一般に販売されるなどして入手できる)。これは "show me" 要件と呼ばれるものです。
   3. 出荷版、または次のリリースのための開発版 "ナイトリービルド (nightly build)" である。ただし、このバージョンはテストスイートをパスするためだけに作成され、常用を目的としていないものを含みません。

2. CR 期間 (CR Period) は、最低で三ヶ月以上経過する必要があります。この仕様が CR を通過したとき、実装レポートが公開されます。現段階では、そのようなレポートは存在しません。

3. 仕様に記された技術は、アクセシビリティに害を与えるものであってはなりません。

前の草案に対し寄せられたコメント も保存されています。

Features at risk

CSS WG は媒体特性 ‘device-aspect-ratio’ をリスクのあるもの ("be at risk") としています。これはユーザーエージェントのサポートが思わしくないためです。また、‘orientation’ および ‘aspect-ratio’ というふたつの媒体特性についても、ひとつ前の勧告候補で追加されたことからリスクのあるものとしています。

目次

• 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 解像度
• 謝辞
• 参考文献
  • 規範的な参考文献
  • その他の参考文献

1. 背景

(このセクションは規範的ではありません。)

HTML4 [HTML401] と CSS2 [CSS2] は、異なる媒体用に調整された、媒体固有のスタイルシートに対応しています。たとえば、ある文書にスクリーン用と印刷用という、異なるスタイルシートを適用することができます。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 }
}

媒体型 "print" と "screen" は HTML4 で定義されています。定義されている媒体型は "aural"、"braille"、"handheld"、"print"、"projection"、"screen"、"tty"、"tv" の 8 つです。CSS2 ではこれに加え、"embossed" という、点字フィードバックデバイスと点字プリンタを区別するための新しい媒体型が追加されています。また、すべての媒体型にスタイルを適用する "all" というものも利用されています。

訳註: ここでの「媒体型 (media type)」は、Content-Type や MIME の “媒体型 (media type)” とは異なり、出力デバイスの種類や性質を現します。

媒体型 ‘print’ と ‘screen’ は HTML4 で定義されています。HTML4 で定義される媒体型は ‘aural’、‘braille’、‘handheld’、‘print’、‘projection’、‘screen’、‘tty’、‘tv’ の計 8 つです。CSS2 ではこのリストから ‘aural’ を省き、‘embossed’ と ‘speech’ を加えた計 9 つが定義されています。また、すべての媒体に対しスタイルを適用する媒体型 ‘all’ も利用されています。

媒体固有のスタイルシートは、いくつかのユーザーエージェントによってサポートされています。頻繁に利用されるのは ‘screen’ と ‘print’ で、スクリーンと印刷機器で異なるスタイルを適用するというものです。

さて、この媒体型指定について、スタイルを適用させたい出力デバイスのタイプをより細かく記述したいという要望がありました。HTML4 はそのような要望を予想していたため、媒体型について前方互換性のある構文を定義していました。HTML4 仕様書の section 6.13 には、次のように書かれています。

訳註: 次の引用部分についても、日本語に翻訳しています。

将来の HTML において新しい値の追加を行うこと、またパラメータ化された値を許容することは可能です。これらの拡張を容易に行うため、適合するユーザーエージェントは次のように media 属性の値を パース できる必要があります。

1. 値はカンマによって区切られた、リストとなっています。

   media="screen, 3d-glasses, print and resolution > 90dpi"
   

   これは次のように扱われます。

   "screen"
   "3d-glasses"
   "print and resolution > 90dpi"
   

2. 各エントリは US ASCII 文字 [a-zA-Z] (Unicode decimal 65-90, 97-122)、数字 [0-9] (Unicode hex 30-39)、またはハイフン (45) 以外の最初の文字で切り取られます。先ほどの例の場合、次のように処理されます。

   "screen"
   "3d-glasses"
   "print"
   

この仕様で定義されるメディアクエリーは、HTML4 で考えられた仕組みをもととしています。メディアクエリーの構文は、HTML4 で予約された媒体型の構文にも対応するものとなっています。HTML4 の media 属性は XHTML にも、また一般的な XML にも存在しています。同様の構文はまた、CSS の ‘@media’ 規則および ‘@import’ でも使用することができます。

しかしながら、CSS におけるメディアクエリーのパース処理規則は、HTML4 の処理規則と互換性がありません。この違いを解決するため、将来の HTML はメディアクエリー仕様を参照するように望まれています。

2. メディアクエリー

メディアクエリーは、媒体型と 媒体特性 (media features) に関わる 0 以上の 式 (expressions) から成り立っています。媒体型が省略された場合、それは ‘all’ と解釈されます。

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

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

メディアクエリーは、真または偽となる論理式です。メディアクエリーは、クエリー内の媒体型が、実行中のユーザーエージェントが属する媒体型 ("適用対象" に記載) に一致し、またクエリー内のすべての式が真であるとき真となります。‘not’ キーワードが含まれるメディアクエリーについては、キーワードを省いたクエリーが偽と評価された場合、真となります。

メディアクエリーが真であるとき、関連するスタイルシートは通常のカスケード処理規則に従って適用されます。

カンマで区切ることにより、複数のメディアクエリーを結合することができます。複数のクエリーのうちひとつ以上が真である場合、関連するスタイルシートが適用されます。そうでない場合、スタイルシートは無視されます。カンマ区切りのリストが空である場合、そのメディアクエリーは ‘all’ に対して指定されるものとして扱われます。

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

<link rel="stylesheet" href="example.css" media=""/>
<link rel="stylesheet" href="example.css" media=" "/>

メディアクエリー構文において、カンマは論理式の OR を、また ‘and’ キーワードは論理式の AND を表しています。

論理式の NOT は ‘not’ キーワードによって表されます。

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

クエリーの先頭に ‘not’ キーワードを記述することで、キーワード以降のクエリーを否定することができます。つまり、‘not’ のないメディアクエリーが真であった場合、‘not’ をつけることにより偽となります。反対に ‘not’ のない状態でクエリーが偽であった場合、‘not’ をつけることで真となります。HTML4 で定義された媒体型のみをサポートするユーザーエージェントは ‘not’ キーワードを理解しないため、クエリーに関連付けられたスタイルシートは適用されません。

また、古いユーザーエージェントにスタイルシートを解釈させないよう、‘only’ キーワードを利用することができます。ユーザーエージェントは ‘only’ から始まるメディアクエリーを、‘only’ キーワードが存在していないかのように解釈し処理する必要があります。

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

メディアクエリー構文は HTML や XHTML、XML [XMLSTYLE]、そして CSS の @import 規則と @media 規則に使用することができます。

<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" />

<?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) { ... }

記されている媒体特性が、現在のデバイスに当てはまらない場合、その媒体特性に関わる式は偽と評価されます。

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

クエリーで使用されている単位が対象となるデバイスに当てはまらない場合、式は常に偽と評価されます。

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

すべての媒体型に対するメディアクエリー、‘all’ は省略することができます。ただし、この省略表記を利用する場合は、後に続く ‘and’ も省略する必要があります。

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

式を評価するためにスタイルを適用する必要はありません。これは循環依存関係を避けるためです。たとえば、印刷された文書のアスペクト比はスタイルシートに影響されるでしょう。しかし、‘device-aspect-ratio’ に関わる式はユーザーエージェントが持つアスペクト比の規定値を基にします。

これは必須ではありませんが、ユーザーエージェントは環境が変化した時、クエリーを再評価しページのレイアウトを再構成することが望ましいでしょう。環境の変化とはたとえば、デバイスが横長から縦長モードになった時などです。

3. 構文

メディアクエリーの構文は CSS2 の文法 と CSS2 の構文 を用いて表されます。つまり、この仕様書で定義されていない規則は CSS2 で定義されているものです。次で定義される media_query_list は、CSS2の medium にとってかわるものです。[CSS21]

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

CSS2 に定義されている COMMENT トークンはこの文法の中にありませんが、これは可読性を確保するためです。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 に追加されます。また、NOT、ONLY、AND、‘,’ が CSS2 の value に追加されます。

CSS スタイルシートは基本的に大文字と小文字を区別しません (case-insensitive)。メディアクエリーもこれに準じます。

文法への適合もさることながら、メディアクエリーが適合しているとみなされるには、利用している媒体特性が仕様にて定義されている必要があります。

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

3.1 エラー処理

ユーザーエージェントは適合しないメディアクエリーに対し、次の規則に従う必要があります。

• 未知の媒体型 未知の媒体型が指定された場合、それは偽と評価されます。しかし ‘not’ キーワードにより否定されていれば、真と評価されます。実際には、デバイスの媒体型にマッチしない媒体型と同じように扱われます。

  メディアクエリー "unknown" は、媒体型 unknown がサポートされていない場合、偽と評価されます。このような場合、"not unknown" は真となります。

  Note: 未知の媒体型は、IDENT に沿わない媒体型と扱いが異なります。IDENT に沿わないものは、非整形式のメディアクエリーとして扱われます。

• 未知の媒体特性 ユーザーエージェントは、指定された媒体特性 (のひとつ以上) が未知である場合、そのメディアクエリーを無視します。

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

  この例では、最初のメディアクエリーが、未知の媒体特性と未知の値を利用していることから退けられます。しかし、二番目のメディアクエリーは、最初のクエリーが指定されていなかったかのように評価されます。

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

  このメディアクエリーは却下されます。これは、媒体特性 ‘orientation’ が ‘min-’ 接頭辞に対応しないからです。

• 未知の媒体特性値 未知の媒体特性と同じく、ユーザーエージェントは、指定された媒体特性の値が未知である場合、そのメディアクエリーを無視します。

  (color:20example) というメディアクエリーは未知の値を ‘color’ に指定しています。このため、このメディアクエリーは無視されます。

  次のメディアクエリーは不正なものです。なぜなら、媒体特性 ‘width’ は負の長さを持つことが許されていないからです。

  @media (min-width: -100px) { ... }

• 非整形式なメディアクエリー ユーザーエージェントはメディアクエリーをその終わりまでパースするなかで、想定されていないトークンに出会ったとき、それを処理します (なお、対応する記号の処理規則 に従い ()、[]、{}、""、'' を処理し、適切にエスケープも行ったうえでのことです)。想定されていないトークンを含んだメディアクエリーは無視されます。[CSS21]

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

  次にあるのは非整形式なメディアクエリーです。なぜなら ‘and’ と式の間にスペースがないからです。スペースを記述する必要があるのは、スペースなしの構文が関数表記のために予約されているからです。

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

  メディアクエリーリスト内にあるすべてのメディアクエリーが無視されたとき、それは "not all" が指定されたものと同じ意味を持ちます。

  次のメディアクエリーはどれも "not all" と同じ意味になります。

  @media test, @test { ... }
  @media example { ... }
  @media screen and (min-example), example { ...}

4. 媒体特性

媒体特性は、構文的に CSS プロパティのように表されています。特性の名前と、いくつかの値を持つという意味です。しかし、媒体特性とプロパティの間には、いくつかの重要な違いがあります。

• プロパティは 宣言 (declarations) のなかで利用され、どのように文書を表現するかという情報を与えます。一方、媒体特性は 式 (expressions) のなかで利用され、出力デバイスの要件を記述します。
• 多くの媒体特性では ‘min-’ や ‘max-’ といった接頭辞をつけることで、"～以上" や "～以下" という制限を課すことができます。"<" や ">" を利用しないのは、これらの文字が HTML や XML で利用されるので、その衝突を避けるためです。これらの接頭辞を持つ媒体特性は多くの場合接頭辞つきで利用されますが、接頭辞なしで利用することももちろん可能です。
• プロパティの値は宣言の構成のために必須となっていますが、媒体特性は値なしで利用することができます。ある媒体特性 feature を利用したメディアクエリー (feature) は、0 または単位つきの 0 (0px、0emなど) ではないある値 x が (feature:x) に対し真となるとき、真になります。min/max な接頭辞をもつ媒体特性は、値なしで利用することができません。もし値無しで利用された場合、そのメディアクエリーは非整形式となります。
• プロパティには計算式など、複雑な値を含めることができますが、媒体特性はひとつの値 (キーワード、数値、単位つきの数値) のみしか含めることができません。ただし ‘aspect-ratio’ と ‘device-aspect-ratio’ は例外です。

この仕様は、視覚的デバイスと触覚デバイスに利用可能な媒体特性を定義します。媒体特性は音声デバイスに対しても同様に定義することができるでしょう。

4.1 width

媒体特性 ‘width’ は、出力デバイスにおける対象表示域 (targeted display area) の幅を表します。連続的なメディアにおいては、表示域 (viewport) の幅を表します (表示域は CSS2 の section 9.1.1 [CSS2] にて定義されています)。ページメディアについては、ページボックス (page box) の幅を表します (ページボックスは CSS2 の section 13.2 [CSS2] にて定義されています)。

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

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

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

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

4.2 height

媒体特性 ‘height’ は、出力デバイスにおける対象表示域 (targeted display area) の高さを表します。連続的なメディアにおいては、表示域の高さを表します。ページメディアについては、ページボックスの高さを表します。

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

4.3 device-width

媒体特性 ‘device-width’ は、出力デバイスにおける描画面の幅を表します。連続的な媒体においては、スクリーンの幅となり、ページ媒体においては、ページボックスの幅となります。

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

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

4.4 device-height

媒体特性 ‘device-height’ は、出力デバイスにおける描画面の高さを表します。連続的な媒体においては、スクリーンの高さとなり、ページ媒体においては、ページボックスの高さとなります。

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

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

4.5 orientation

媒体特性 ‘orientation’ は表示域のアスペクト比を表します。表示域の幅が高さより長ければ、‘landscape’ が真に、そうでなければ ‘portrait’ が真となります。表示域が正方形である場合、それは ‘portrait’ と解釈されます。

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

4.6 aspect-ratio

媒体特性 ‘aspect-ratio’ は表示域のアスペクト比を表します。アスペクト比は、表示域の幅を高さで割ったものとなります。

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

4.7 device-aspect-ratio

媒体特性 ‘device-aspect-ratio’ は、出力デバイスのアスペクト比を表します。デバイスのアスペクト比は、デバイスのディスプレイ幅を高さで割ったものとして定義されます。

@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

媒体特性 ‘color’ は、出力デバイスが持つ各カラーチャンネルのビット数を表します。デバイスがカラーデバイスでない場合、値は 0 となります。

<integer> に 0 または負の値を指定することはできません。

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

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

各カラーチャンネルがそれぞれ異なるビット数を持つ場合は、その最小値が使われます。

インデックスカラーを持つデバイスでビット数の最小値を求めるには、カラーテーブルを利用します。

Note: ここに記載された機能は、あくまで表面的なレベルで色表現能力を指定することができるものです。それ以上の機能が必要とされる場合は、RFC2531 [RFC2531] にて今後対応するかもしれない、より細かい媒体特性が提供されています。

4.9 color-index

媒体特性 ‘color-index’ は、出力デバイスの持つカラーテーブルのエントリ数を表します。デバイスがカラーテーブルを持たない場合、値は 0 となります。

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

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

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

4.10 monochrome

媒体特性 ‘monochrome’ はモノクロームフレームバッファにおける階調数を表します。デバイスがモノクロデバイスでない場合、値は 0 をとります。

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

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

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

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

4.11 resolution

媒体特性 ‘resolution’ は、ピクセル密度など、出力デバイスの解像度を表します。非正方ピクセルなデバイスにおいて、‘min-resolution’ クエリーはデバイスの最低密度と指定された値を、また ‘max-resolution’ クエリーはデバイスの最高密度と指定された値を比べる必要があります。"min-" や "max-" 接頭辞のつかないただの ‘resolution’ クエリーは、非正方ピクセルなデバイスにおいて適合することはありません。

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

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

4.12 scan

媒体特性 ‘scan’ は、種類が "tv" である出力デバイスが持つ走査処理方法を表します。

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

4.13 grid

媒体特性 ‘grid’ は、出力デバイスがグリッドであるかビットマップであるかを表します。出力デバイスがグリッドベース ("tty" ターミナルや、一つの固定フォントしか持たない電話のディスプレイなど) である場合、値は 1 となります。グリッドベースでない場合、値は 0 となります。

0 または 1 が妥当な値として認識されます (-0 も妥当です)。そのほかの値を記述すると、非製形式なメディアクエリーとなります。

単位 ‘em’ は、グリッドデバイスにおいて特別な意味を持ちます。‘em’ の正確な幅を決定できないため、‘em’ はグリッドセルの横の幅と、縦の高さとして判断されます。

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

5. 値

この仕様は、ふたつの新しい値を導入しています。

<ratio> は、スラッシュ (‘/’) で区切られた、ふたつの正の <integer> により表されます。スラッシュの前後には空白を記述することができます。

<resolution> は、正の <number> の直後に単位識別子 (‘dpi’ または ‘dpcm’) を記述したものです。空白を間に記述することはできません。

この仕様書で利用されている他の値は、

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

6. 単位

メディアクエリーで使用される単位は、他の CSS 仕様と同じものです。たとえば、ピクセルは CSS ピクセルを意味し、物理的なピクセルを意味しません。

しかし、‘em’ は前のセクションで解説しているように、グリッドデバイスにおいて特別な意味を持っています。

メディアクエリーにおいて相対的な単位は、文書のルート要素の初期値を基にしています。たとえば HTML の場合、html 要素に指定された ‘font-size’ プロパティの初期値が ‘em’ の値となります。

6.1 解像度

二つの単位 ‘dpi’ と ‘dpcm’ はピクセル密度など、出力デバイスの持つ解像度を表します。解像度を表す単位は次のようになっています。

dpi

インチあたりのドット数 (dots per inch)

dpcm

センチメートルあたりのドット数 (dots per centimeter)

この仕様書において、これらの単位は媒体特性 ‘resolution’ のみに使用されます。

謝辞

この仕様は、W3C の Cascading Style Sheets ワーキンググループによって作成されました。

またこの仕様は、Björn Höhrmann、Christoph Päper、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. 19 July 2007. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2007/CR-CSS21-20070719

その他の参考文献

[HTML401]

Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224

[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. Associating Style Sheets with XML documents. 29 June 1999. W3C Recommendation. URL: http://www.w3.org/1999/06/REC-xml-stylesheet-19990629