この文書は、2010 年現在の CSS を構成する仕様すべてをまとめ定義したものである。主な対象は CSS の実装者であり制作者ではない。これは、この文書で定義したモジュールが、Web ブラウザーの実装度合いではなく仕様の安定度合いによって選定されることにある。
この文書のステータスこの章は、この文書の公開時におけるステータスについて説明する。他の文書がこの文書を上書きする可能性に注意されたい。この技術文書や W3C から公開された他の文書の最新版は W3C 技術文書インデックス (http://www.w3.org/TR/) より探すことができる。
WG ノートとしての公開は、W3C Member による支持を意味するものではない。この文書は草案段階にあり、更新、置き換え、もしくは廃止される可能性もある。策定中であることを記さずに、この文書を参照することは適切ではない。
この文書は Style Activity の CSS Working Group によって作成された。
この文書に関する議論は、公開メーリングリスト www-style@w3.org (アーカイブ, 参加の手引き) 上で行うことが望ましい。メールを送信する際には、“css-2010” を件名に含めていただきたい。たとえば “[css-2010] …コメントの要約…” といった形が望ましいだろう。
この文書は 5 February 2004 W3C Patent Policy の下で活動するグループにより作成された。W3C は 特許情報の開示に関する公開リスト を関連する団体と共に、その成果物とあわせて管理している。リストには情報開示に関する説明もあるため、あわせて参照されたい。特許について十分に知識のある人物が、当該仕様に Essential Claim(s) が認められると判断した場合は、W3C 特許方針の第 6 章 に従い情報を開示する必要がある。
この文書は 2010 年時点における CSS の状況を表すものである。CSS WG は今後この文書の改訂を考えていない。代わりに新しいスナップショットが CSS が進行するたびに http://www.w3.org/TR/CSS/ で公開されるだろう。
目次 1. はじめに最初の CSS 仕様が公開されたとき、すべての CSS は CSS Level 1 を定義する文書ひとつにまとめられていた。CSS Level 2 においても、すべての CSS は複数の章からなるひとつの文書にまとめられていた。しかし、Level 2 より後の CSS について、CSS WG はモジュール化による策定を選択した。ひとつの巨大な仕様にすべてを定義するのではなく、CSS を分割し別個のモジュールとして定義するのだ。モジュール化により、各機能は管理しやすい大きさにまとまり、またより早く、より漸進的な CSS の改訂が可能となった。
こうして、CSS モジュールはそれぞれ異なる安定度合いを持つようになった。このため、CSS WG はこのプロファイルを公開し、2010 年後半における CSS の範囲と原状を定義することにした。このプロファイルには、我々 CSS WG が安定しており、かつその安定度合いを保証する実装経験をもつ CSS 仕様のみを含めている。
この文書がデスクトップブラウザーための CSS プロファイルという意図ではないことに注意されたい。仕様をプロファイルに含める判断基準は、機能の安定度合いのみであり Web ブラウザの採用度合いや利用度合いに基づくものではない。このプロファイルは、完成形に近い CSS を定義している。
大きな変更を加えることは想定していないが、スナップショットで定義されてるからといって、その仕様は確定されたことを意味しないことに注意されたい。CSS WG は仕様に見つかった問題に対処し続ける。実装者は仕様に加えられた変更、修正、明確化を知るにあたり、www-style や CSS Working Group Blog も参考にされたい。
1.1. W3C プロセスと CSSこのセクションは非規範的である。
W3C のプロセス では、勧告トラックにある文書は次に記す 5 つの段階を経るとされている。各段階はそれに準じた安定度合いを持つ。
CSS WG の経験からふまえると、勧告トラックは一本道というわけではないと言える。最終草案で意見や評価が寄せられ、多くの場合、仕様は 1 つもしくはそれ以上の草案を新たに公開することになるからだ。CSS 仕様についてはより顕著であり、多くの仕様が 2 度も勧告候補となっている。これは、実装による仕様の検証においてそれまで発見されていなかった重大な問題が見つかり、その修正過程で仕様が案へ差し戻されたことにある。加えて、小さな問題の修正も草案への差し戻しを必要とする場合がある。
CSS WG は CSS 仕様の安定度合いに関して明確な考えを持っていたが、仕様の公式なステータスが異なっていたことから、グループ外部と仕様の安定度合いに関し同じ認識を持つことが困難となっていた。この文書を作成する目的は、CSS WG が持つ CSS の原状に対する認識を外へ知らせることにあるのだ。
2. CSS のレベルCSS は従来のバージョンという考えではなく、レベル (levels) という概念に基づいている。各レベルの CSS は下位レベルの上に構築され、定義の改訂や機能追加を行っている。上位レベルの機能は下位レベルのスーパーセットであり、また上位レベルの挙動は下位レベルのサブセットとなる。上位レベルの CSS に適合するユーザーエージェントは、すべての下位レベルにもまた適合する。
2.1. CSS Level 1CSS WG は、CSS1 仕様 を廃止された仕様 (obsolete) と位置づけている。CSS Level 1 は CSS1 仕様で定義されたプロパティ、値、@ 規則などの機能すべてから成ると定義されているが、CSS1 仕様書にある構文や定義は CSS 2.1 仕様 のものを利用している。また、CSS Style Attributes が、要素固有のスタイル属性に CSS を埋め込む方法を定義している。
2.2. CSS Level 2CSS2 仕様 は建前的には W3C 勧告とされているが、この仕様は W3C が勧告候補という段階をプロセスに設ける前に策定されている。その後、仕様の実装とさらなる評価により、CSS2 仕様にはさまざまな問題があることが明らかになった。膨れ続ける 手に負えない数のエラッタ に対処するため、CSS WG は CSS Level 2 Revision 1 (CSS 2.1) を定義することを決定した経緯がある。CSS 2.1 と CSS2 の間に記述の違いがある場合、CSS 2.1 が確実な定義を行っている。
その肩書が意味する安定度は勧告に及ばないが、勧告候補となった時点で CSS 2.1 は実質的に CSS2 以上の安定性を持った。このため、CSS 2.1 は CSS2 勧告を廃止する (obsolete) ものと考えるべきである。CSS 2.1 から削除された CSS2 の機能は、勧告候補の段階にあるものと考えてよい。それらの多くは Level 3 の CSS 仕様に盛り込まれることになるだろう。そして、それらの仕様が CR に達したとき、CSS2 の定義は完全に廃止される (obsolete) ものと考えてよい。
結論として、CSS Level 2 は CSS 2.1 仕様 により定義される。また、CSS Style Attributes が、要素固有のスタイル属性に CSS を埋め込む方法を定義している。
2.3. CSS Level 3このセクションは非規範的である。
CSS Level 3 は CSS 2.1 仕様を核に、CSS Level 2 より上位の CSS をモジュール化された仕様により構成するものだ。各モジュールは CSS 2.1 仕様に機能を追加する、または一部を改訂している。CSS WG は、新しい CSS モジュールが CSS 2.1 仕様と矛盾しないよう心がけている。新しいモジュールは機能を追加するか、定義を改訂するものとなる。各モジュールの策定が終了すると、それらは CSS 2.1 とその時点で終了しているモジュールから構成される CSS の定義に追加される。
CSS3 以降のモジュールは、機能ごとに独立したレベルを持つ。たとえば、Selectors Level 4 が CSS Line Module Level 3 より早く定義されることも考えられる。
3. CSS 定義2010 年時点で、CSS は次に列挙した仕様から構成される。
CSS にはフォールバック値をあてがうという、前方互換なパース処理規則が存在する。これを製作者が利用できるようにするため、CSS レンダラは利用できるレベルにない @ 規則やプロパティ、値、キーワード、その他の構文を非妥当なものとして扱う (必要に応じて 無視 する) 必要がある (MUST)。特にユーザーエージェントは、複数の値が指定された宣言のうち、サポートしていない値のみを無視するといったことをしてはならない (MUST NOT)。非妥当な値 (サポートしていない値も同様) がある場合、CSS は宣言すべてを無視する必要があると定めている。
3.2. CSS プロファイルすべての実装が、CSS で定義されている機能のすべてを実装しているわけではない。ある実装では特定の CSS プロファイル (CSS Profile) で必須とされる機能のみを実装していることもある。プロファイルとは、特定のクラスの CSS 実装において基本であると考えられる機能を定義した CSS のサブセットを指す。CSS WG は、次の CSS プロファイルを定義している。
3.3. 試験的な実装プロプライエタリなプロパティや値の拡張が、将来の CSS で定義される機能と衝突しないように、CSS 2.1 仕様では 接頭辞構文 というものを用意している。
仕様が W3C プロセスの勧告候補に達する以前は、CSS 機能の実装すべてが試験的なものとされる。CSS WG は、これら機能 (W3C 草案に含まれるもの) の試験実装にはベンダー接頭辞を付加することを求める。これにより、草案に変更があったとき互換性が損なわれることがなくなる。
歴史的な経緯から、いくつかの試験的な CSS プロパティはこの接頭辞規約に従っていない。‘word-wrap
’ と ‘text-overflow
’ プロパティが代表的な例だろう。これらは CSS 2.1 がベンダー接頭辞ポリシーを導入する前に Microsoft Internet Exolorer によって接頭辞なしの状態で実装され、その後他のブラウザにおいても実装された。これにより、W3C の仕様はないが、接頭辞なしの名前に依存する結果となった。同様の経緯を持つ例外については、CSS WG に問い合わせ願いたい。
仕様が勧告候補の段階に達したとき、実装者は仕様に正しく従って実装されたと提示できる勧告候補段階の機能すべてについて、接頭辞なしの構文を実装することが奨励される。
実装間の CSS の相互運用性を確保・管理するため、CSS WG は試験実装でない CSS レンダラが接頭辞なしで CSS の機能を実装する前に、実装レポート (必要であればそのレポートに利用するテストケース含む) を W3C に提供することを求めている。W3C に提出するテストケースは CSS WG によって検証・修正が行われる。
テストケースの提出と実装レポートに関するより詳しい説明は、CSS WG の Web サイト (http://www.w3.org/Style/CSS/Test/) を参照されたい。質問は public-css-testsuite@w3.org メーリングリストに送信されたい。
実装レポートに現れる実装は CSS 2.1 実装が望ましいが、レポートの提出に必須ではない。
4. インデックスこのセクションは非規範的である。
4.1. プロパティインデックス 名前 値 初期値 適用対象 継承 パーセンテージ 媒体background-attachment
scroll | fixed | inherit scroll なし visual background-color
<color> | inherit transparent なし visual background-image
<uri> | none | inherit none なし visual background-position
[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 0% 0% なし ボックスのサイズを参照する visual background-repeat
repeat | repeat-x | repeat-y | no-repeat | inherit repeat なし visual background
[‘background-color
’ || ‘background-image
’ || ‘background-repeat
’ || ‘background-attachment
’ || background-position
] | inherit 個別のプロパティを参照 なし ‘background-position
’ で利用可能 visual border-collapse
collapse | separate | inherit separate ‘table
’ 要素、‘inline-table
’ 要素 あり visual border-color
[ <color> ]{1,4} | inherit 個別のプロパティを参照 なし visual border-spacing
<length> <length>? | inherit 0 ‘table
’ 要素、‘inline-table
’ 要素 あり visual border-style
<border-style>{1,4} | inherit 個別のプロパティを参照 なし visual border-top
border-right
border-bottom
border-left
[ <border-width> || <border-style> || border-top-color
] | inherit 個別のプロパティを参照 なし visual border-top-color
border-right-color
border-bottom-color
border-left-color
<color> | inherit ‘color
’ プロパティの値 なし visual border-top-style
border-right-style
border-bottom-style
border-left-style
<border-style> | inherit none なし visual border-top-width
border-right-width
border-bottom-width
border-left-width
<border-width> | inherit medium なし visual border-width
<border-width>{1,4} | inherit 個別のプロパティを参照 なし visual border
[ <border-width> || <border-style> || border-top-color
] | inherit 個別のプロパティを参照 なし visual bottom
<length> | <percentage> | auto | inherit auto 配置された要素 なし コンテナブロックの高さを参照する visual caption-side
top | bottom | inherit top ‘table-caption
’ 要素 あり visual clear
none | left | right | both | inherit none ブロックレベル要素 なし visual clip
<shape> | auto | inherit auto 絶対配置された要素 なし visual color
<color> | inherit UA 依存 あり visual content
normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit normal :before, :after 擬似要素 なし all counter-increment
[ <identifier> <integer>? ]+ | none | inherit none なし all counter-reset
[ <identifier> <integer>? ]+ | none | inherit none なし all 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 | progress ] ] | inherit auto あり visual, interactive direction
ltr | rtl | inherit ltr すべての要素 (定義も参照) あり visual display
inline | block | list-item | inline-block | 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 なし all empty-cells
show | hide | inherit show ‘table-cell
’ 要素 あり visual float
left | right | none | inherit none すべて (9.7 も参照) なし visual font-family
[ [ <family-name> | <generic-family> ] [, <family-name>| <generic-family> ]* ] | inherit UA 依存 あり visual font-size
<absolute-size> | <relative-size> | <length> | <percentage> | inherit medium あり 継承されたフォントサイズを参照する visual font-style
normal | italic | oblique | inherit normal あり visual font-variant
normal | small-caps | inherit normal あり visual font-weight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal あり visual font
[ [ ‘font-style
’ || ‘font-variant
’ || ‘font-weight
’ ]? ‘font-size
’ [ / ‘line-height
’ ]? font-family
] | caption | icon | menu | message-box | small-caption | status-bar | inherit 個別のプロパティを参照 あり 個別のプロパティを参照 visual height
<length> | <percentage> | auto | inherit auto 非置換なインライン要素、テーブルカラム、カラムグループを除くすべての要素 なし 定義を参照 visual left
<length> | <percentage> | auto | inherit auto 配置された要素 なし コンテナブロックの幅を参照する visual letter-spacing
normal | <length> | inherit normal あり visual line-height
normal | <number> | <length> | <percentage> | inherit normal あり 要素のフォントサイズを参照する visual list-style-image
<uri> | none | inherit none ‘display: list-item
’ を指定された要素 あり visual list-style-position
inside | outside | inherit outside ‘display: list-item
’ を指定された要素 あり visual list-style-type
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit disc ‘display: list-item
’ を指定された要素 あり visual list-style
[ ‘list-style-type
’ || ‘list-style-position
’ || list-style-image
] | inherit 個別のプロパティを参照 ‘display: list-item
’ を指定された要素 あり visual margin-right
margin-left
<margin-width> | inherit 0 テーブルキャプション、テーブル、インラインテーブルを除くテーブル要素 なし コンテナブロックの幅を参照する visual margin-top
margin-bottom
<margin-width> | inherit 0 テーブルキャプション、テーブル、インラインテーブルを除くテーブル要素 なし コンテナブロックの幅を参照する visual margin
<margin-width>{1,4} | inherit 個別のプロパティを参照 テーブルキャプション、テーブル、インラインテーブルを除くテーブル要素 なし コンテナブロックの幅を参照する visual max-height
<length> | <percentage> | none | inherit none 非置換なインライン要素、テーブルカラム、カラムグループを除くすべての要素 なし 定義を参照 visual max-width
<length> | <percentage> | none | inherit none 非置換なインライン要素、テーブル行、テーブル行グループを除くすべての要素 なし コンテナブロックの幅を参照する visual min-height
<length> | <percentage> | inherit 0 非置換なインライン要素、テーブルカラム、カラムグループを除くすべての要素 なし see prose visual min-width
<length> | <percentage> | inherit 0 非置換なインライン要素、テーブル行、テーブル行グループを除くすべての要素 なし コンテナブロックの幅を参照する visual opacity
<number> | inherit 1 すべて なし visual orphans
<integer> | inherit 2 ブロックコンテナ要素 あり visual, paged outline-color
<color> | invert | inherit invert なし visual, interactive outline-style
<border-style> | inherit none なし visual, interactive outline-width
<border-width> | inherit medium なし visual, interactive outline
[ ‘outline-color
’ || ‘outline-style
’ || outline-width
] | inherit 個別のプロパティを参照 なし visual, interactive overflow
visible | hidden | scroll | auto | inherit visible ブロックコンテナ なし visual padding-top
padding-right
padding-bottom
padding-left
<padding-width> | inherit 0 テーブル行グループ、テーブルヘッダグループ、テーブルフッタグループ、テーブル行、テーブルから無グループ、テーブルカラムを除くすべての要素 なし コンテナブロックの幅を参照する visual padding
<padding-width>{1,4} | inherit 個別のプロパティを参照 テーブル行グループ、テーブルヘッダグループ、テーブルフッタグループ、テーブル行、テーブルから無グループ、テーブルカラムを除くすべての要素 なし コンテナブロックの幅を参照する visual page-break-after
auto | always | avoid | left | right | inherit auto ブロックレベル要素 (定義も参照) なし visual, paged page-break-before
auto | always | avoid | left | right | inherit auto ブロックレベル要素 (定義も参照) なし visual, paged page-break-inside
avoid | auto | inherit auto ブロックレベル要素 (定義も参照) なし visual, paged position
static | relative | absolute | fixed | inherit static なし visual quotes
[<string> <string>]+ | none | inherit UA 依存 あり visual right
<length> | <percentage> | auto | inherit auto 配置された要素 なし コンテナブロックの幅を参照する visual table-layout
auto | fixed | inherit auto ‘table
’ 要素、‘inline-table
’ 要素 なし visual text-align
left | right | center | justify | inherit ‘direction
’ が ‘ltr
’ の場合 ‘left
’ に、‘direction
’ が ‘rtl
’ の場合 は ‘right
’ に相当する、名前を持たない値 ブロックコンテナ あり visual text-decoration
none | [ underline || overline || line-through || blink ] | inherit none なし (定義も参照) visual text-indent
<length> | <percentage> | inherit 0 ブロックコンテナ あり コンテナブロックの幅を参照する visual text-transform
capitalize | uppercase | lowercase | none | inherit none あり visual top
<length> | <percentage> | auto | inherit auto 配置された要素 なし コンテナブロックの高さを参照する visual unicode-bidi
normal | embed | bidi-override | inherit normal すべての要素 (定義も参照) なし visual vertical-align
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit baseline インラインレベル要素と ‘table-cell
’ 要素 なし 要素の ‘line-height
’ を参照する visual visibility
visible | hidden | collapse | inherit visible あり visual white-space
normal | pre | nowrap | pre-wrap | pre-line | inherit normal あり visual widows
<integer> | inherit 2 ブロックコンテナ要素 あり visual, paged width
<length> | <percentage> | auto | inherit auto 非置換なインライン要素、テーブル行、テーブル行グループを除くすべての要素 なし コンテナブロックの幅を参照する visual word-spacing
normal | <length> | inherit normal あり visual z-index
auto | <integer> | inherit auto 配置された要素 なし visual 4.2. セレクタインデックス パターン 説明 セクション 初出の CSS レベル * すべての要素 全称セレクタ 2 E E 要素型 型セレクタ 1 E[foo] "foo" 属性を持つ E 要素 属性セレクタ 2 E[foo="bar"] "foo" 属性の値が "bar" である E 要素 属性セレクタ 2 E[foo~="bar"] "foo" 属性が空白区切りの値をとり、その値の1つが "bar" である E 要素 属性セレクタ 2 E[foo^="bar"] "foo" 属性の値が "bar" から始まる E 要素 属性セレクタ 3 E[foo$="bar"] "foo" 属性の値が "bar" で終わる E 要素 属性セレクタ 3 E[foo*="bar"] "foo" 属性の値に "bar" という文字列を含む E 要素 属性セレクタ 3 E[foo|="en"] "foo" 属性の値がハイフン区切りの値をとり、その値が "en" から始まる E 要素 属性セレクタ 2 E:root 文書のルート要素である E 要素 構造擬似クラス 3 E:nth-child(n) n 番目の子である E 要素 構造擬似クラス 3 E:nth-last-child(n) 後ろから数えて n 番目の子である E 要素 構造擬似クラス 3 E:nth-of-type(n) 同じ型をもつ要素のうち n 番目にある E 要素 構造擬似クラス 3 E:nth-last-of-type(n) 同じ型をもつ要素のうち後ろから数えて n 番目にある E 要素 構造擬似クラス 3 E:first-child 最初の子である E 要素 構造擬似クラス 2 E:last-child 最後の子である E 要素 構造擬似クラス 3 E:first-of-type 同じ型をもつ要素のうち最初の E 要素 構造擬似クラス 3 E:last-of-type 同じ型をもつ要素のうち最後の E 要素 構造擬似クラス 3 E:only-child 唯一の子である E 要素 構造擬似クラス 3 E:only-of-type 同じ型をもつ要素が他にない唯一の E 要素 構造擬似クラス 3 E:empty テキストノードを含め子を持たない E 要素 構造擬似クラス 3 E:link
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3