7 メディアタイプ

目次

注: この仕様の複数の節は、他の仕様によって更新されている。置換された仕様および節のリストの詳細は、最新のCSS Snapshotにおける"Cascading Style Sheets (CSS) — 公式の定義"を参照されたい。

CSS Working Groupはまた、CSS level 2 revision 2 (CSS 2.2).を開発している。

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

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

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

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

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

@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.1において無効である。

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.1は、以下のメディアグループを定義する:

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

メディアグループとメディアタイプの関係
メディアタイプ メディアグループ
  continuous/paged visual/audio/speech/tactile grid/bitmap interactive/static
braillecontinuoustactilegridboth
embossedpagedtactilegridstatic
handheldbothvisual, audio, speechbothboth
printpagedvisualbitmapstatic
projectionpagedvisualbitmapinteractive
screencontinuousvisual, audiobitmapboth
speechcontinuousspeech利用不可both
ttycontinuousvisualgridboth
tvbothvisual, audiobitmapboth