CyberLibrarian

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

First Update: 2012年11月2日


W3C

メディア・クエリ

W3C勧告 2012年6月19日

本バージョン:
http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/
最新バージョン:
http://www.w3.org/TR/css3-mediaqueries/
最新編集者草案:
http://dev.w3.org/csswg/css3-mediaqueries/
旧バージョン:
http://www.w3.org/TR/2012/PR-css3-mediaqueries-20120426/
コメントの処理:
http://www.w3.org/Style/2012/MediaQueriesDisposalOfComments.html
編集者:
Florian Rivoal <>
旧編集者:
Håkon Wium Lie <>
Tantek Çelik <>
Daniel Glazman <>
Anne van Kesteren <>

このドキュメントに対する正誤表を参照してください。いくつかの規範的な修正が含まれているかもしれません。

翻訳版も参照してください。


要約

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. 背景

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

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 }
}

print」(印刷)と「screen」(画面)のメディア・タイプが、HTML4で定義されています。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の規則を更新しています。

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);

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

すべてのメディア・タイプに適用されるメディア・クエリには、省略構文が用意されており、「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つ以上のメディア・クエリが真の場合、リスト全体が真となり、それ以外の場合は偽です。メディア・クエリ構文では、カンマは論理和を表し、「and」というキーワードは論理積を表します。

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

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

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

次の2つは同等です。

@media all { … }
@media { … }

論理否定は、notというキーワードで表現できます。メディア・クエリの先頭に「not」というキーワードがあれば、結果は否定されます。つまり、「not」というキーワードがないメディア・クエリが真であれば、偽になり、その逆も同じです。(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疑似属性でメディア・クエリを用いるようにまだ更新されていません。

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

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

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

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

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

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

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

循環依存関係を回避するため、式を評価するためにスタイル・シートを適用する必要は全くありません。例えば、印刷したドキュメントの縦横比は、スタイル・シートの影響を受けるかもしれませんが、「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スタイル・シートは一般的に、大文字・小文字を区別せず、これはメディア・クエリでも同じです。

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

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

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

3.1. エラー処理

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

4. メディア特性

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

例えば、「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 (device-max-height: 7em) { … }

5.

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

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

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

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

6. 単位

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

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

6.1. 解像度

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/