Media types
1.Media types概要
スタイルシートの最大の特徴の一つは、コンピュータの画面、紙、音声合成器、ブラインドデバイスなど、異なるメディアタイプでのドキュメントの表示効果を指定できることです.
一部のCSSプロパティは、特定のメディアに対して設定されています(たとえば、「page-break-before」プロパティはpaged Mediaにのみ適用されます).ただし、異なるメディアタイプがスタイルシートの同じスタイルプロパティを共有する場合がありますが、それぞれ異なるプロパティ値が必要です.例えば、font-size属性は、コンピュータの画面と印刷装置とを同時に適用することができる.この2つのデバイスのタイプは非常に異なるため、コンピュータの画面上のフォントは紙のフォントよりも大きい可能性があります.したがって、特定のデバイスにのみ適応するスタイルシート、またはスタイルシートの領域をサポートする必要があります.
2.デバイスタイプに依存するスタイルシートの説明
スタイル依存デバイスのタイプを説明する2つの方法があります.@mediaおよび@importコマンドを使用してスタイルシートのターゲットデバイスタイプ を指定する文書言語内でターゲットメディアタイプを指定する、例えばHTML 4でlink要素のmeta属性でスタイルシートのターゲットタイプを指定する .
3.@mediaルール
@mediaルールは、スタイル宣言セットに適応するターゲットメディアタイプ(異なるメディアタイプ間を「,」で区切る)を識別する.不正なスタイル宣言は無視されます.@メディア構造では、同じスタイルシートで異なるメディアタイプのスタイルを指定できます.次のようになります.
前の例では@mediaルール以外のスタイル宣言スタイルがすべてのメディアタイプに適用されます.@media内部のスタイルはcss 2にする必要がある.1検証.
4.識別可能なメディアタイプ(Recognized media types)
ターゲット・デバイス・タイプのCSSメディア・タイプ名を識別し、関連するスタイル・プロパティの意味を反映します.以下のメディアタイプ名は標準ですが、説明は拡張可能です. allは、すべてのメディア に適用する. brailleブラインドデバイス に適用 handheldハンドヘルドデバイス(通常は小画面、制限帯域幅) print紙または印刷プレビューモードの文書 embossedブラインドプリンタ projection投影装置、例えばプレゼンテーションドキュメント screenカラーコンピュータディスプレイ tty音声合成器 tvテレビ メディアタイプの名前は大文字と小文字が敏感です.
ユーザーエージェントが1つのメディアタイプのドキュメントレンダリングのみをサポートしている場合、異なるメディアタイプのスタイル宣言は互いに反発します.しかし、ユーザエージェントは、異なるメディアタイプのスタイルを異なるキャンバス上でレンダリングすることもできます.たとえば、同じユーザーエージェントでは、1つのドキュメントを1つのキャンバスにscreenモードで表示するか、別のキャンバスにprintモードで表示することができます.
なお、マルチメディアタイプは、tvタイプなどのメディアタイプのみであり、キャンバス上で視覚と聴覚をレンダリングすることができる.
@mediaおよび@importルールは、認識できないメディアタイプ(非有効識別子)に対して、未知のメディアタイプをレンダリングとして扱います.@mediaおよび@importルールに不完全なメディアタイプが含まれている場合、対応するスタイルは合法ではありません.
5.Media group
各CSS属性は、適用されるメディアタイプが指定されることになっている.いくつかのスタイル属性が複数のメディアタイプに適用されるため、各メディアタイプに単独でこのスタイルを宣言しないために、メディアタイプのメディアグループ(Media Group)のセットがより効果的になります.
CSS2.1では、次のメディアグループを定義します. continuous/paged visual/audio/speech/tactile grid/bitmap interactive/static all
Media typesとmediaグループの関係表
Media Types
Media Groups
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
N/A
both
tty
continuous
visual
grid
both
tv
both
visual, audio
bitmap
both
スタイルシートの最大の特徴の一つは、コンピュータの画面、紙、音声合成器、ブラインドデバイスなど、異なるメディアタイプでのドキュメントの表示効果を指定できることです.
一部のCSSプロパティは、特定のメディアに対して設定されています(たとえば、「page-break-before」プロパティはpaged Mediaにのみ適用されます).ただし、異なるメディアタイプがスタイルシートの同じスタイルプロパティを共有する場合がありますが、それぞれ異なるプロパティ値が必要です.例えば、font-size属性は、コンピュータの画面と印刷装置とを同時に適用することができる.この2つのデバイスのタイプは非常に異なるため、コンピュータの画面上のフォントは紙のフォントよりも大きい可能性があります.したがって、特定のデバイスにのみ適応するスタイルシート、またはスタイルシートの領域をサポートする必要があります.
2.デバイスタイプに依存するスタイルシートの説明
スタイル依存デバイスのタイプを説明する2つの方法があります.
@import url("fancyfonts.css") screen;
@media print {
/* style sheet for print goes here */
}<!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>3.@mediaルール
@mediaルールは、スタイル宣言セットに適応するターゲットメディアタイプ(異なるメディアタイプ間を「,」で区切る)を識別する.不正なスタイル宣言は無視されます.@メディア構造では、同じスタイルシートで異なるメディアタイプのスタイルを指定できます.次のようになります.
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
div{
margin:0 auto;
}前の例では@mediaルール以外のスタイル宣言スタイルがすべてのメディアタイプに適用されます.@media内部のスタイルはcss 2にする必要がある.1検証.
4.識別可能なメディアタイプ(Recognized media types)
ターゲット・デバイス・タイプのCSSメディア・タイプ名を識別し、関連するスタイル・プロパティの意味を反映します.以下のメディアタイプ名は標準ですが、説明は拡張可能です.
ユーザーエージェントが1つのメディアタイプのドキュメントレンダリングのみをサポートしている場合、異なるメディアタイプのスタイル宣言は互いに反発します.しかし、ユーザエージェントは、異なるメディアタイプのスタイルを異なるキャンバス上でレンダリングすることもできます.たとえば、同じユーザーエージェントでは、1つのドキュメントを1つのキャンバスにscreenモードで表示するか、別のキャンバスにprintモードで表示することができます.
なお、マルチメディアタイプは、tvタイプなどのメディアタイプのみであり、キャンバス上で視覚と聴覚をレンダリングすることができる.
@mediaおよび@importルールは、認識できないメディアタイプ(非有効識別子)に対して、未知のメディアタイプをレンダリングとして扱います.@mediaおよび@importルールに不完全なメディアタイプが含まれている場合、対応するスタイルは合法ではありません.
5.Media group
各CSS属性は、適用されるメディアタイプが指定されることになっている.いくつかのスタイル属性が複数のメディアタイプに適用されるため、各メディアタイプに単独でこのスタイルを宣言しないために、メディアタイプのメディアグループ(Media Group)のセットがより効果的になります.
CSS2.1では、次のメディアグループを定義します.
Media typesとmediaグループの関係表
Media Types
Media Groups
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
paged
visual
bitmap
static
projection
paged
visual
bitmap
interactive
screen
continuous
visual, audio
bitmap
both
speech
continuous
speech
N/A
both
tty
continuous
visual
grid
both
tv
both
visual, audio
bitmap
both