Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://www.asahi-net.or.jp/~ax2s-kmtn/internet/css/REC-css3-mediaqueries-20120619.html below:

メディア・クエリ

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

First Update: 2012年11月2日

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

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

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

W3C勧告は、実装可能となるよう広くレビューされ公開されてきた成熟したドキュメントです。W3Cは、全ての人に対し、この仕様の実装を奨励します。この仕様に関する議論には、公開メーリングリストwww-style@w3.org(アーカイブ)の利用をお勧めします(手引きを参照)。電子メールを送信する場合には、件名に「css3-mediaqueries」を入力してください(できれば、[css3-mediaqueries] …summary of comment…の要領で)。

このドキュメントは、W3Cメンバー、ソフトウェア開発者、他のW3Cグループ、および他の利害関係者によりレビューされ、W3C勧告として管理者の協賛を得ました。これは確定済みドキュメントであり、参考資料として用いたり、別のドキュメントで引用することができます。勧告の作成におけるW3Cの役割は、仕様に注意を引き付け、広範囲な開発を促進することです。これによってウェブの機能性および相互運用性が増強されます。

ワーキンググループの実装報告書およびメディア・クエリのテスト・スイートを参照してください。

コメントの処理および前の勧告案に対する変更のリストも参照してください。

W3C勧告としての公開は、W3Cメンバーによる承認を意味しません。これは草案ドキュメントであるため、他のドキュメントによって、随時更新されたり、置き換えられたり、廃止されることもあります。作業中以外のものとしてこのドキュメントを引用することは適当ではありません。

このドキュメントは、CSSワーキンググループ(スタイル・アクティビティー(Style Activity)の一部)によって作成されました。

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

このドキュメントは、スタイル・シートと、タイトル、日付およびより古い変更の項の削除などの前付け部分の編集上の変更を除き、前の勧告案バージョンと同じです。

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

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

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属性値を解析できなければなりません。

1. 値は、コンマで区切られた項目のリストにします。例えば、

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

   は、次のとおりにマッピングされます。

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

2. 各項目は、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の規則とは互換性がありません。

HTML5[HTML5](執筆時点ではまだ作成中)は、メディア・クエリの仕様を直接参照しており、したがって、HTMLの規則を更新しています。

メディア・クエリは、メディア・タイプと、特定のメディア特性の条件をチェックする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 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) { … }

[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」に関する式は、ユーザ・エージェントのデフォルトの縦横比に基づくでしょう。

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

メディア・クエリ構文は、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スタイル・シートは一般的に、大文字・小文字を区別せず、これはメディア・クエリでも同じです。

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

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

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

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

• 未知のメディア・タイプ。未知のメディア・タイプは、false(偽)となります。事実上、デバイスのメディア・タイプと一致しない既知のメディア・タイプと同じように扱われます。

  「unknown」というメディア・クエリは、unknownが実際にサポートされているメディア・タイプでなければfalse(偽)となります。同様に、「not unknown」はtrue(真)となるでしょう。

  未知のメディア・タイプは、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規則を終了させるため、適用されません。

メディア特性は、構文的に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))になったりする可能性があります。

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

値: <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」の初期値と相対的です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

値: <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) { … }

値: <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]で提供されています。

値: <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/…" ?>

値: <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://…" />

値: <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) { … }

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

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

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

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

値: <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 (device-max-height: 7em) { … }

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

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

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

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

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

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

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

dpi

CSSの「inch」あたりのドット数

dpcm

CSSの「centimeter」あたりのドット数

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

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

Björn Höhrmann、Christoph Päper、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. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224

[HTML5]

Ian Hickson. HTML5. 29 March 2012. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-html5-20120329/

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3