CSS TV Profile 1.0 [日本語版]

この文書は、W3C の勧告候補 (Candidate Recommendation)、"CSS TV Profile 1.0" (2003 年 5 月 14 日付) を独自に翻訳したものです。この仕様書の正式なものは W3C のサイトにある英語版であり、その著作権は W3C が保有しています。また、翻訳に誤りがある可能性に留意してください。参照の際は原文と対比することを推奨します。

なお、この文書の翻訳にあたり、JIS 標準情報 (TR) の「段階スタイルシート水準2(CSS2)」を参考にしました。いくつかの個所では、引用も行っていますが、技術的内容を変えない範囲で記号や用語、言い回しを変更しています。

翻訳の最終更新日: 2006 年 11 月 4 日

概要

この仕様は、テレビジョン機器の要件や制限に合わせて調整された、Cascading Style Sheets Level 2 仕様及び CSS3 Module: Color 仕様のサブセットを定義するものです。

この文書の位置付け

このセクションは、公開時点でのこの文書の位置付けについて述べたものです。他の文書がこの文書を置き換えることがあります。この文書群の最新の位置付けのものは、W3C で管理されています。

この仕様をレビューして実装し、公開メーリングリストwww-style (アーカイブ) に対してコメントすることが求められています (手続き参照)。W3C メンバであれば、 CSS ワーキンググループに直接コメントすることもできます。

この仕様が CR 段階を終了するには、次のような状態になることが必要です。

TV Profileの「すべての」特徴を実装した、相互運用可能な実装系が、少なくとも 2 つ存在すること。実装系には特徴のスーパーセットであっても構わないが、プロファイルを満たすことが要求される。この評価の為に、次の用語を定義する。
特徴 (feature)
3 節及び 4 節の表の「CSS TV」行に「いいえ」と書かれていない行

相互運用可能 (interoperable)
CSS テストスイートの信頼できるテストケースを満たす。実装系がウェブブラウザでなければ、代替テストでも可。そのようなユーザエージェント (UA) の相互運用性の調査に用いられるのつもりであれば、テストスイートのあらゆる関連テストには、代替テストが作成されるべきである。さらに、そのような UA が相互運用性の要求に用いられるのであれば、1 つ以上の別の UA も、相互運用性というからには、その代替テストを満たすべきである。代替テストは、仲間がレビューできるよう、公開されるべきである。

実装系 (implementation)
次のようなユーザエージェント。
1. 特徴を実装する。
2. 公開されている (つまり、一般にダウンロード可能になっているか、その他一般的な流通経路で入手可能になっている). これが「公衆陳列 (show me)」要求である。
3. 発表されている (つまり、開発版、私家版、非公式版では不充分である)。
4. 試験目的ではない (つまり、一般の利用者向けのものであり、日常で用いることができるものられる。)
CR 期間が少なくとも 6 ヶ月経過していること。これは、残された大きな問題の発見に充分な時間を確保するためである。

W3C はこの仕様が、最終草案に寄せられたすべてのコメントが処理され、安定したものであると信じています。ワーキンググループにより更新されることがありますが、それは意味合いを明確にするためだけに行われます。もし、予想外の、重要な問題が見つかったなら、草案 (Working Draft) の状態に差し戻されます。勧告候補の段階は少なくとも 6 ヶ月 (2002 年 7 月 ∼ 2003 年 1 月) の間維持されます。その後、終了条件が満たされればすぐに、勧告案 (Proposed Recommendation) へと進みます。

CSS に関連する特許開示情報は、ワーキンググループが公開している特許開示情報ページにあるかもしれません。

W3C が現在公開している勧告その他の技術文書の一覧は、http://www.w3.org/TR にあります。

1. 概論

この文書は、セットトップボックスやインタラクティブテレビジョンセットのような、テレビジョンの画面に映像を出力するようになっている TV デバイスに適した、Cascading Style Sheets level 2 (CSS2) 仕様および CSS3 Module: Color 仕様のプロファイルを規定するものです。このプロファイルへ適合するというのは、ユーザエージェントが少なくともこの仕様で定義された機能をサポートしていることを表します。この点については、この後の 2 節、適合条件で説明しています。

要するに、CSS2 では、複数の機器やメディアタイプで文書を表示できるスタイルシートを開発者が制作する方法を規定しています。これは非常に重要なことですが、それぞれの機器でどの機能がサポートされるかについて作成者 (author) が知ることも重要です。また、同じような機器は同じような方法で処理を行うことも重要です。さもないと、作成者は機器ごとに専用バージョンのスタイルシートを開発しなければならなくなるでしょう。その結果、コンテンツ開発のコストは上昇し、相互運用性が減少することになります。

CSS TV Profile は、テレビジョン機器向けの適合条件プロファイルを規定したもので、プロパティ、値、セレクタ、カスケーディング規則の最小限のセットを決めています。そうして得られた CSS TV Profile は、 CSS1 の大部分、CSS2 と CSS3 Module: Color の一部が含まれています。CSS TV Profile は CSS Mobile Profile の、'handheld' メディアタイプの替わりに 'tv' メディアタイプを利用するようにしたものの、厳密な意味でのスーパーセットになっています。

2. 適合条件

プロファイルというものの主な役割は、機能群のサブセットを定義し、相互運用性について最小限の保証を行うことです。CSS TV Profile の場合、ここでいう保証にあたるのは、適合するユーザエージェントが、CSS2 の適合条件 ([CSS2] の 3.2 節) に従ってこの仕様で定義され、改められ、下記に要約された機能をサポートするということです。

作成者は、この適合条件プロファイルを使って前方互換性を活用することが推奨されます (RECOMMENDED)。作成者は、カスケーディング規則が正しく処理されることや、未知のプロパティや値は無視されることを理解した上でスタイルプロパティを使うことができるはずです。例を示します。

'display' プロパティで 'run-in' 値を処理できる TV-UA は、最初の宣言を受け入れ、2 つめの display 宣言で値を「上書き」します。'run-in' 値を処理できない TV-UA は、最初の display 宣言を処理し、2 番目を無視します。

3. セレクタと @ 規則

セレクタ

CSS2 では、文書ツリー内の要素に適用されるスタイル規則を、パターンマッチ規則で決定します [CSS2]。

次の表は、CSS TV Profile でのセレクタの構文をまとめたものです。CSS TV Profile ではこれらセレクタに加えて、CSS2 のグループ化機構 ([CSS2] 5.2.1 節を参照) も含まれます。

@ 規則

次の表は、CSS TV Profile の @ 規則の文法をまとめたものです。

4. プロパティ

パターン	意味	セレクタの種類	CSS TV
*	あらゆる要素と一致する	汎用セレクタ	はい
E	あらゆる E 要素 (すなわち、型 E の要素) と一致する	型セレクタ	はい
E F	あらゆる F 要素のうち、E 要素の子孫であるものと一致する	子孫セレクタ	はい
E > F	あらゆる F 要素のうち、要素 E の子であるものと一致する	子セレクタ	はい
E:first-child	要素 E が親の最初の子である場合に、その要素 E と一致する	:first-child 擬似クラス	はい
E:link E:visited	要素 E がハイパーリンクのソースアンカであって、そのハイパーリンクのターゲットがまだ訪問されていない (:link) か又は既に訪問された (:visited) ものである場合に、その要素 E と一致する。	リンク擬似クラス	はい
E:active	ユーザのある種の動作中に、E と一致する。	動的擬似クラス	はい
E:hover	ユーザのある種の動作中に、E と一致する。	動的擬似クラス	いいえ
E:focus	ユーザのある種の動作中に、E と一致する。	動的擬似クラス	はい
E:lang(c)	型 E の要素が (人間の使う) 言語 c で表されている (文書言語が言語を決定する方法を指定する) 場合に、その要素と一致する。	:lang() 擬似クラス	いいえ
E + F	あらゆる F 要素のうち、要素 E が直前にあるものと一致する。	隣接セレクタ	いいえ
E[foo]	あらゆる E 要素のうち、"foo" 属性が設定されているもの (値は問わない) と一致する。	属性セレクタ	いいえ
E[foo="bar"]	あらゆる E 要素のうち、"foo" 属性の値が "bar" とちょうど等しいものと一致する。	属性セレクタ	いいえ
E[foo~="bar"]	あらゆる E 要素のうち、"foo" 属性の値がスペースで区切った値のリストで、その値のひとつが "bar" とちょうど等しいものと一致する。	属性セレクタ	いいえ
E[foo\|="bar"]	あらゆる E 要素のうち、"foo" 属性の値がハイフンで区切った値のリストで、その最初 (左から数える) の値が "bar" であるものと一致する。	属性セレクタ	いいえ
E:first-line	E 要素のフォーマットされた最初の行と一致する。	:first-line 擬似要素	はい
E:first-letter	E 要素のフォーマットされた最初の文字と一致する。	:first-letter 擬似要素	はい
E:before	E 要素の前に生成内容に一致する／生成する。	:before 擬似要素	いいえ
E:after	E 要素の後ろに生成内容に一致する／生成する。	:after 擬似要素	いいえ
E.bar	あらゆる E 要素のうち、class 属性 (文書の記述言語により決定される) の値がスペースで区切った値のリストで、その値のひとつが "bar" とちょうど等しいものと一致する。	クラスセレクタ	はい
E#bar	あらゆる E 要素のうち、ID が "bar" に等しいものと一致する。	ID セレクタ	はい

@ 規則	機能	CSS TV
@import	外部スタイルシートをインポートする。	はい
@charset	スタイルシートの文字符号化の名前を指定する。	はい
@media	1 あるいは複数の特定メディアに適用されるスタイル規則の集合のグループ化を行う。	はい
@font-face	ダウンロードにも用いられる、フォントファミリ名を指定する。	いいえ
@page	(名前を付けることも可能な) ページボックスを指定する。	いいえ
@color-profile	名前付きの色プロファイルを指定する。	いいえ

次の表は、CSS TV Profile のプロパティとプロパティ値をまとめたものです。プロパティや値の定義については、[CSS2] を参照してください。

名前	CSS TV	CSS 値	初期値
'azimuth'	いいえ	<angle> \| [ left-side \| far-left \| left \| center-left \| center \| center-right \| right \| far-right \| right-side ] \|\| behind ] \| leftwards \| rightwards \| inherit	center
'background'	['background-color' \|\| 'background-image' \|\| 'background-repeat' \|\| 'background-position'] \| inherit	['background-color' \|\| 'background-image' \|\| 'background-repeat' \|\| 'background-attachment' \|\| 'background-position'] \| inherit	個々のプロパティを参照
'background-attachment'	いいえ	scroll \| fixed \| inherit	scroll
'background-color'	はい	<color> \| transparent \| inherit	transparent
'background-image'	はい	<uri> \| none \| inherit	none
'background-position'	はい	[ [ <percentage> \| <length> ]{1,2} \| [ [top \| center \| bottom] \|\| [left \| center \| right] ] ] \| inherit	0% 0%
'background-repeat'	はい	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit	repeat
'border'	はい	[ <border-width> \|\| <border-style> \|\| <border-color> ] \| inherit	個々のプロパティを参照
'border-collapse'	いいえ	collapse \| separate \| inherit	separate
'border-color'	はい	<color>{1,4} \| transparent \| inherit	個々のプロパティを参照
'border-spacing'	いいえ	<length> <length>? \| inherit	0
'border-style'	はい	<border-style>{1,4} \| inherit	個々のプロパティを参照
'border-top' 'border-right' 'border-bottom' 'border-left'	はい	[ <border-width> \|\| <border-style> \|\| <border-color> ] \| inherit	個々のプロパティを参照
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color'	はい	<color> \| transparent \| inherit	'color' プロパティの値
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style'	はい	<border-style> \| inherit	none
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width'	はい	<border-width> \| inherit	medium
'border-width'	はい	<border-width>{1,4} \| inherit	個々のプロパティを参照
'bottom'	はい	<length> \| <percentage> \| auto \| inherit	auto
'caption-side'	はい	top \| bottom \| left \| right \| inherit	top
'clear'	はい	none \| left \| right \| both \| inherit	none
'clip'	はい	<shape> \| auto \| inherit	auto
'color'	はい	<color> \| inherit	ユーザエージェントによる
'content'	いいえ	[ <string> \| <uri> \| <counter> \| attr(X) \| open-quote \| close-quote \| no-open-quote \| no-close-quote ]+ \| inherit	空文字列
'counter-increment'	いいえ	[ <identifier> <integer>? ]+ \| none \| inherit	none
'counter-reset'	いいえ	[ <identifier> <integer>? ]+ \| none \| inherit	none
'cue'	いいえ	[ 'cue-before' \|\| 'cue-after' ] \| inherit	個々のプロパティを参照
'cue-after'	いいえ	<uri> \| none \| inherit	none
'cue-before'	いいえ	<uri> \| none \| inherit	none
'cursor'	いいえ	[ [<uri> ,]* [ auto \| crosshair \| default \| pointer \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize\| text \| wait \| help ] ] \| inherit	auto
'direction'	いいえ	ltr \| rtl \| inherit	ltr
'display'	inline \| block \| list-item \| none \| inherit	inline \| block \| list-item \| run-in \| compact \| marker \| table \| inline-table \| table-row-group \| table-header-group \| table-footer-group \| table-row \| table-column-group \| table-column \| table-cell \| table-caption \| none \| inherit	inline
'elevation'	いいえ	<angle> \| below \| level \| above \| higher \| lower \| inherit	level
'empty-cells'	いいえ	show \| hide \| inherit	show
'float'	はい	left \| right \| none \| inherit	none
'font'	はい	[ [ 'font-style' \|\| 'font-variant' \|\| 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] \| caption \| icon \| menu \| message-box \| small-caption \| status-bar \| inherit	個々のプロパティを参照
'font-family'	はい	[[ <family-name> \| <generic-family> ],]* [ <family-name> \| <generic-family> ] \| inherit	ユーザエージェントによる
'font-size'	はい	<absolute-size> \| <relative-size> \| <length> \| <percentage> \| inherit	medium
'font-size-adjust'	いいえ	<number> \| none \| inherit	none
'font-stretch'	いいえ	normal \| wider \| narrower \| ultra-condensed \| extra-condensed \| condensed \| semi-condensed \| semi-expanded \| expanded \| extra-expanded \| ultra-expanded \| inherit	normal
'font-style'	はい	normal \| italic \| oblique \| inherit	normal
'font-variant'	はい	normal \| small-caps \| inherit	normal
'font-weight'	はい	normal \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| inherit	normal
'height'	はい	<length> \| <percentage> \| auto \| inherit	auto
'left'	はい	<length> \| <percentage> \| auto \| inherit	auto
'letter-spacing'	いいえ	normal \| <length> \| inherit	normal
'line-height'	はい	normal \| <number> \| <length> \| <percentage> \| inherit	normal
'list-style'	はい	[ 'list-style-type' \|\| 'list-style-position' \|\| 'list-style-image' ] \| inherit	個々のプロパティを参照
'list-style-image'	はい	<uri> \| none \| inherit	none
'list-style-position'	はい	inside \| outside \| inherit	outside
'list-style-type'	disc \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| lower-latin \| upper-alpha \| upper-latin \| none \| inherit	disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-alpha \| lower-latin \| upper-alpha \| upper-latin \| hebrew \| armenian \| georgian \| cjk-ideographic \| hiragana \| katakana \| hiragana-iroha \| katakana-iroha \| none \| inherit	disc
'margin'	はい	<margin-width>{1,4} \| inherit	個々のプロパティを参照
'margin-top' 'margin-right' 'margin-bottom' 'margin-left'	はい	<margin-width> \| inherit	0
'marker-offset'	いいえ	<length> \| auto \| inherit	auto
'marks'	いいえ	[ crop \|\| cross ] \| none \| inherit	none
'max-height'	いいえ	<length> \| <percentage> \| none \| inherit	none
'max-width'	いいえ	<length> \| <percentage> \| none \| inherit	none
'min-height'	いいえ	<length> \| <percentage> \| inherit	0
'min-width'	いいえ	<length> \| <percentage> \| inherit	ユーザエージェントによる
'orphans'	いいえ	<integer> \| inherit	2
'outline'	はい	[ 'outline-color' \|\| 'outline-style' \|\| 'outline-width' ] \| inherit	個々のプロパティを参照
'outline-color'	はい	<color> \| invert \| inherit	invert
'outline-style'	はい	<border-style> \| inherit	none
'outline-width'	はい	<border-width> \| inherit	medium
'overflow'	いいえ	visible \| hidden \| scroll \| auto \| inherit	visible
'padding'	はい	<padding-width>{1,4} \| inherit	個々のプロパティを参照
'padding-top' 'padding-right' 'padding-bottom' 'padding-left'	はい	<padding-width> \| inherit	0
'page'	いいえ	<identifier> \| auto	auto
'page-break-after'	いいえ	auto \| always \| avoid \| left \| right \| inherit	auto
'page-break-before'	いいえ	auto \| always \| avoid \| left \| right \| inherit	auto
'page-break-inside'	いいえ	avoid \| auto \| inherit	auto
'pause'	いいえ	[ [<time> \| <percentage>]{1,2} ] \| inherit	ユーザエージェントによる
'pause-after'	いいえ	<time> \| <percentage> \| inherit	ユーザエージェントによる
'pause-before'	いいえ	<time> \| <percentage> \| inherit	ユーザエージェントによる
'pitch'	いいえ	<frequency> \| x-low \| low \| medium \| high \| x-high \| inherit	medium
'pitch-range'	いいえ	<number> \| inherit	50
'play-during'	いいえ	<uri> mix? repeat? \| auto \| none \| inherit	auto
'position'	static \| relative \| absolute \| inherit	static \| relative \| absolute \| fixed \| inherit	static
'quotes'	いいえ	[ <string><string>]+ \| none \| inherit	ユーザエージェントによる
'richness'	いいえ	<number> \| inherit	50
'right'	はい	<length> \| <percentage> \| auto \| inherit	auto
'size'	いいえ	<length>{1,2} \| auto \| portrait \| landscape \| inherit	auto
'speak'	いいえ	normal \| none \| spell-out \| inherit	normal
'speak-header'	いいえ	once \| always \| inherit	once
'speak-numeral'	いいえ	digits \| continuous \| inherit	continuous
'speak-punctuation'	いいえ	code \| none \| inherit	none
'speech-rate'	いいえ	<number> \| x-slow \| slow \| medium \| fast \| x-fast \| faster \| slower \| inherit	medium
'stress'	いいえ	<number> \| inherit	50
'table-layout'	いいえ	auto \| fixed \| inherit	auto
'text-align'	left \| right \| center \| justify \| inherit	left \| right \| center \| justify \| <string> \| inherit	ユーザエージェントと書字方向による
'text-decoration'	none \| [ underline \|\| overline \|\| line-through ] \| inherit	none \| [ underline \|\| overline \|\| line-through \|\| blink ] \| inherit	none
'text-indent'	はい	<length> \| <percentage> \| inherit	0
'text-shadow'	いいえ	none \| [<color> \|\| <length> <length> <length>? ,]* [ <color> \|\| <length> <length> <length>?] \| inherit	none
'text-transform'	はい	capitalize \| uppercase \| lowercase \| none \| inherit	none
'top'	はい	<length> \| <percentage> \| auto \| inherit	auto
'unicode-bidi'	いいえ	normal \| embed \| bidi-override \| inherit	normal
'vertical-align'	baseline \| sub \| super \| top \| middle \| bottom \| inherit	baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| <percentage> \| <length> \| inherit	baseline
'visibility'	はい	visible \| hidden \| collapse \| inherit	inherit
'voice-family'	いいえ	[[ <specific-voice> \| <generic-voice> ],]* [ <specific-voice> \| <generic-voice> ] \| inherit	ユーザエージェントによる
'volume'	いいえ	<number> \| <percentage> \| silent \| x-soft \| soft \| medium \| loud \| x-loud \| inherit	medium
'white-space'	はい	normal \| pre \| nowrap \| inherit	normal
'widows'	いいえ	<integer> \| inherit	2
'width'	はい。 TV UA は、`*{max-width: 100%}` と UA スタイルシート規則に実装することが出来ることに注意。これは水平スクロールの発生を避けるための措置である。	<length> \| <percentage> \| auto \| inherit	auto
'word-spacing'	いいえ	normal \| <length> \| inherit	normal
'z-index'	はい	auto \| <integer> \| inherit	auto

次の表は、CSS TV Profile における、CSS3 Module: Color 由来のプロパティとプロパティ値をまとめたものです。プロパティや値の定義については、[CSS3COLOR] を参照してください。

5. CSS の構文

名前	CSS TV	CSS 値	初期値
'color'	HTML4 のキーワード, RGB と RGBA 値, transparent, orange, inherit	HTML4 のキーワード, RGB, RGBA, HSL および HSLA 値, transparent, X11 キーワード, システム色, flavor, attr(X,color), inherit	ユーザエージェントによる
'color-profile'	いいえ	auto \| sRGB \| <name> \| <uri> \| inherit	auto
'opacity'	はい	<alphavalue> \| inherit	1
'rendering-intent'	no	auto \| perceptual \| relative-colorimetric \| saturation \| absolute-colorimetric \| inherit	auto

CSS TV Profile は、[CSS2] で規定されているのと同じ構文を使用します。CSS TV Profile は、CSS2 で使われる値のサブセットを使用します。具体的には次のとおりです。

同様に、CSS TV Profile では、適合するユーザエージェントに対して、[CSS2] で規定された文字符号化機構をサポートすることを必須とします。具体的には次のとおりです。

6. プロパティ値の割り当て、カスケーディング、継承

全体的に、CSS TV Profile では CSS2 と同じカスケーディング規則を使用します。具体的には次のとおりです。

7. メディアタイプ

CSS TV Profile に適合するユーザエージェントは、CSS2 ([CSS2] 7 節) で規定されているように、メディア依存のスタイルシートを処理できなければなりません (MUST)。具体的には次のとおりです。

TV-UA は、メディアタイプ tv に付随する CSS2 の適合性条文 ([CSS2] 7.3.1 節を参照) を満たす必要はありません。TV-UA が満たす必要があるのは、この仕様の適合性条文だけです。

8. 謝辞

この文書は、CSS 第 1 水準勧告と CSS 第 2 水準勧告、CSS3 Module: Color と CSS Mobile Profile 1.0 の派生物です。CSS1、CSS2、CSS3 Module: Color と　CSS Mobile Profile の著作者、編集者、貢献者全員に感謝します。

CSS ワーキンググループのメンバーにも感謝します。特に Bert Bos、Chris Lilley と Tapas Kanti Roy らには、草案への直接のコメントを頂きました。

www-style@w3.org のすべての貢献者にも感謝します。特に ARIB、Akihiko Handa、Joel Zdepski、Etan Wexler、Kynn Bartlett、Björn Höhrmann、fantasai と Susan Lesch には草案に対して貴重なコメントを頂きました。

CSS TV Profile 1.0

W3C 勧告候補 2003 年 5 月 14 日

概要