7 メディアタイプ

7.1 メディアタイプの手引き

スタイルシートの最も重要な機能のひとつは、画面上に、紙の上に、音声シンセサイザーに、点字デバイスになどの異なるメディア上への文書の表示方法を指定することである。

特定のCSSプロパティは、特定のメディア用に設計されている（たとえば、'page-break-before' プロパティは、ページメディアに適用される）。しかし、時折異なるメディアタイプのスタイルシートはプロパティを共有してもよいが、そのプロパティに異なる値を要求してもよい。たとえば、'font-size'プロパティは、画面と印刷メディアの両方に有用である。2つのメディアタイプは、共通のプロパティに別の値を必要とするほど異なるものであり、一般に、文書は紙の上よりもコンピューターの画面上でより大きなフォントが必要になる。したがって、スタイルシートまたはスタイルシートの一部は、特定のメディアタイプの適用を表現する必要がある。

7.2 メディア依存なスタイルシートの指定

現在、スタイルシートのメディア依存関係を指定するための2つの方法が存在する。

@mediaまたは@import規則とともにスタイルシートから対象メディアを指定する。

@import url("fancyfonts.css") screen;
@media print {
  /* 印刷用のスタイルシートがここに入る */
}

文書言語内の対象メディアを指定する。たとえば、HTML 4（[HTML4]）において、LINK要素の"media"属性が外部スタイルシートの対象メディアを指定する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Link to a target medium</TITLE>
      <LINK REL="stylesheet" TYPE="text/css" 
	 MEDIA="print, handheld" HREF="foo.css">
   </HEAD>
   <BODY>
      <P>The body...
   </BODY>
</HTML>

@importは、カスケードの章で定義される。

7.2.1 @media規則

@media規則は、（波括弧区切りの）文の集合に属する（コンマ区切りの）対象メディアタイプを指定する。無効な文は、4.1.7節"規則セット、宣言ブロック、およびセレクター"および4.2節"構文解析エラーの処理ルール"を通して無視されなければならない。@media構造は、同一スタイルシートにおいて様々なメディアに対するスタイルシート規則を許可する。

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

@media規則の外側のスタイル規則は、スタイルシートを適用するすべてのメディアタイプに適用される。@mediaの内部の@規則は、CSS 2.2において無効である。

7.3 認識されるメディアタイプ

CSSメディアタイプに選ばれる名前は、関連するプロパティが意味をなす対象デバイスを反映する。以下のリストにあるCSSメディアタイプの名前は規範的であるが、説明は参考情報である。同様に、各プロパティの説明における"メディア"欄は参考情報である。

all: すべてのデバイス向け。
braille: 点字触覚フィードバックデバイスを対象とする。
embossed: ページ点字プリンターを対象とする。
handheld: 携帯端末（典型的な小さな画面、限られた帯域幅）を対象とする。
print: ページ素材および印刷プレビューモードの画面表示を対象とする。ページメディアに固有な整形問題の詳細については、ページメディアに関する節を参照のこと。
projection: たとえばプロジェクターのような、映写されるプレゼンテーションを対象とする。ページメディアに固有な整形問題の詳細については、ページメディアに関する節を参照のこと。
screen: 主としてカラーコンピューター画面を対象とする。
speech: 音声合成を対象とする。注：CSS2は、この目的に対して"aural"と呼ばれる類似のメディアタイプを持っていた。詳細については聴覚スタイルシートに関する付録を参照のこと。
tty: （テレタイプ、端末、または限られた表示機能を備えたポータブルデバイスなど）固定幅の文字グリッドを使用したメディアを対象とする。著者は、"tty"メディアタイプとともにピクセル単位を使用すべきでない。
tv: テレビ型デバイス（低解像度、カラー、限定スクロール画面、音声使用可能）を対象とする。

メディアタイプ名は大文字・小文字不区別である。

メディアタイプは、文書をレンダリングする際に、ユーザーエージェントが1つのメディアタイプのみをサポートすることができるという意味で相互に排他的である。しかしながら、ユーザーエージェントは、別のキャンバスで異なるメディアタイプを使用してもよい。たとえば、文書が1つのキャンバスに'print'モードで、もう1つのキャンバスに'screen'モードで（同時に）表示してもよい。

マルチモーダルメディアタイプが、依然として1つのメディアタイプでしかないことに注意する。たとえば、'tv'メディアタイプは、単一のキャンバスに視覚と聴覚の両方をレンダリングするマルチモーダルメディアタイプである。

未知の（とはいえ、妥当な識別子である）メディアタイプをもつ@mediaおよび@import規則は、あたかも未知のメディアタイプが存在しないかのように処理される。@mediaまたは@import規則が（識別子でない）不正な形式のメディアタイプを含む場合、その文は無効である。

注：メディアクエリは、このエラー処理を優先する。

たとえば、次の断片においてP要素の規則は、（'3D'メディアタイプが未知であるが）'screen'モードが適用される。

@media screen, 3D {
  P { color: green; }
}

注。将来のCSSの改訂は、メディアタイプのリストを拡張するかもしれない。著者は、CSS仕様でまだ定義されていないメディアタイプの名前に依存すべきではない。

7.3.1 メディアグループ

この節は参考情報で、規範的ではない。

各CSSプロパティの定義は、プロパティが適用されるメディアタイプを指定する。プロパティは、一般的に複数のメディアタイプに適用されるので、各プロパティ定義リストのメディアグループではなく、個々のメディアタイプの"メディアに適用される"。各プロパティは、その定義に記載されるメディアグループ内のすべてのメディアタイプに適用される。

CSS 2.2は、以下のメディアグループを定義する：

continuous、paged。
visual、audio、speech、tactile。
grid（文字グリッドデバイス）、bitmap。
interactive（ユーザーとの対話を許可するデバイス）、static（そうでないもの）。
all （すべてのメディアタイプを含む）

次の表は、メディアグループとメディアタイプ間の関係を示している。

メディアグループとメディアタイプの関係
メディアタイプ	メディアグループ
	continuous/paged	visual/audio/speech/tactile	grid/bitmap	interactive/static
braille	continuous	tactile	grid	both
embossed	paged	tactile	grid	static
handheld	both	visual, audio, speech	both	both
print	paged	visual	bitmap	static
projection	paged	visual	bitmap	interactive
screen	continuous	visual, audio	bitmap	both
speech	continuous	speech	利用不可	both
tty	continuous	visual	grid	both
tv	both	visual, audio	bitmap	both