CSS2 / Cascading Style Sheets Level 2

CSSスタイルシートのバージョンレベル2とは？

CSS2 Cascading Style Sheets Level 2

CSS2とは

　CSS2はCSS1の後継バージョン(CSS/CSSバージョン)で、1998年05月12日W3Cで勧告となりました。

　尚、CSS2としては、このCSS 2.0のバグを解消すべくCSS 2.1に集約する予定でCSS 2.1の勧告を以って( -> 2011/06/07勧告)CSS2と言えばCSS 2.1を指します

　CSS2の大きな特徴は、以下の4つでしょう。

１．CSS1とは別に一部HTMLで行われていたCSSインライン設定とCSSファイル内部設定を統合して基本的にCSS外部ファイル設定で統一しようという点

２．HTMLだけでなくXMLのスタイル設定も行えるようにしようという点

３．映像、音声聴覚用レンダリングへの対応に力を入れようという点

４．CSS2と後継バージョンでテレビや携帯電話、PDA、カーナビ、自販機などPC用途以外の用途へも利用を広げようという点

　1点めと2点めはCSS2でCHTMLやこれらに前後して勧告となっているXHTMLやXHTML Basic含め既に一応の対応が完了しています。

　3点めと4点めについては、CSS2で想定された指定等もありますが、CSS 2.1そしてメジャーバージョンであるCSS3で具現化されるでしょう。

　また、4点めの映像や音声については、HTML5でも仕様策定が進んでおり、<audio>や<video>といったようなタグにファイルを指定するだけで映像再生や音楽再生ソフトのインタフェースが自動生成され再生でき、ボリューム設定などをCSS3で実装するといったような楽しみな機能が検討されています。

　CSS2の勧告が1998年、CSS1が1996年で、日本のインターネット元年が1995年後半ですから、２の内XML自体の策定勧告もそうですが、既にその頃３と４の仕様検討をしていたとはある意味驚きです。

　CSS2は実質HTMLのタグを補助的に装飾という意味合いの強いCSS1の良い部分を取り入れ、一方でCSS主体の考え方で策定されています。

CSS2プロパティ属性一覧

CSS2/CSS1の変更点

　CSS2で新規追加、既存仕様の変更更新された仕様などCSS1からのバージョンアップに伴う変更点の詳細は以下の通りです。

W3CAppendix B. Changes from CSS1(英文)

※尚、CSS 2.0/CSS 2.1でCSS1を引用しているものは1996年勧告1997年加筆されたCSS1ですが、近年だされた改訂版(2008/04/11改訂版Cascading Style Sheets, level 1(英文))とは一致しない部分もありますので改訂版を参照して読み替えて解釈して下さい。

CSS2で定義／新規追加された機能

・PCディスプレイ用[ screen ]の他、メディアごとのメディアタイプ新設とLINK要素の既存設定に追加

・属性のプロパティ値の継承

・印刷媒体専用メディアタイプ[ Paged media ]

・聴覚レンダリング用スタイルシート[Aural style sheet]

・リスト連番付与[ list numbering styles ]、左書き／右書き[ bidirectional text ]のサポートと各地域言語に対応したクォーテーション対応[ quotation marks ]

・フォントのメカニズム範囲拡張／マッチング、統合、ダウンロード可能なフォント、フォント調節機能[font-size-adjust]

・TABLE仕様／[display][vertical-align]新規追加含む

・相対位置と固定位置を含む絶対位置といった位置指定

・新しいBOXタイプ／既存の[ block ]と[ inline ]の中間に位置する[ compact ]と[ run-in ]

・ビジュアル書式モデルのBOXが重なった際に重なった部分を表示させるか隠す[ overflow ]と重なりの位置設定ができる[ clipping ]とBOX自体の表示・非表示設定[ visibility ]

・ビジュアル書式モデルにおける幅と高さの最小値／最大値設定

・子要素セレクタ、アバウト指定ができるセレクタ、属性セレクタの追加を含むセレクタ機能拡張

・文書生成、カウンターと自動連番、マーカー

・テキストに影をつける[text-shadow]プロパティ

・疑似クラスに[ :first-child ][ :hover ][ :focus ][ :lang ]を追加

・システムカラーとフォント

・カーソル

・動的アウトライン設定

CSS2でもCSS1仕様を引き継ぐものの意味が異なるもの

　CSS1仕様に沿ったスタイルシートは、一部同名称でもCSS1とCSS2で機能的に若干異なるものと既存のエラーもありますが、基本的にCSS1はCSS2としても妥当なスタイルシートです。

・[ !important ]の意味合いの変更／「CSS1で作者のCSSがユーザーのCSSより優先される指定」という仕様をCSS2では外しています。

・色の値／CSS1ではRGBに沿った色あいという仕様でしたが、CSS2では色合いはディスプレイやプリンタなどの装置に依存するものと変更されています。

・幅／CSS1では[ margin-left ]と[ width ]を両方指定すると当然のように[ margin-right ]を無視していましたが、CSS2では、この場合[ margin-left ]か[ margin-right ]のどちらに依存するかを選択できる仕様となっています。

・CSS1では[ padding ]などのいくつかのプロパティは、親要素の幅を参照する値を持っていましたが、CSS2では、この親要素の幅の値の参照はエラーとなります。
　これは、その値が常に参照するべきブロックレベル要素の幅と内包されたブロックとの間で干渉してしまう為です。

・CSS1では[ display ]の既定値は[ block ]でしたが、CSS2では[ inline ]です。

・CSS1では全ての要素が[ clear ]プロパティを持つ事ができましたが、CSS2では、ブロックレベル要素のみ設定する仕様に変更しており、これ以外で設定している場合はCSS2ではエラーとなります。

・CSS1では[ :link ][ :visited ][ :active ]は相互排他的な関係でしたが、CSS2では、[ :active ]は、[ :link ][ :visited ]と共に設定する事ができるようになっています。

・フォントサイズが1.5から1.2まで縮小されたテーブルで示されるフォントサイズは、そのサイズかまたはそれに近い値として計測する事を推奨します。

・フォントサイズは、実体値ではなく、端末値を継承します。

・CSS1の[list-style-position]の[inside]についての説明では黒丸の位置以上にテキストの左マージンに影響されるとの解釈でしたが、CSS2では、この説明を削除しました。

CSS2/CSS1におけるトークン上の相違

W3CD.3 Comparison of tokenization in CSS2 and CSS1(英文)

　CSS2にはCSS1に存在しない新たなトークンがあり、これらは可読性を高める為に書かれた文法なのですが、そのいくつかは、互換性のない仕様変更であり、CSS1の構文上ではエラーになってしまうものがあります。

・CSS1は[ASCII]/[ISO-8859-1]のように1文字1バイト表現ですが、CSS2ではそういった制限はありません。
　ユーザーエージェントは2バイト文字を扱う事ができるものの、CSS1の文字を類推するのは難しい状況です。

・CSS1ではUnicode文字を認識する為にバックスラッシュ(日本語キーボード・端末では半角円マーク¥)に続く「4つの16進数表記文字[0-9a-fA-F]」だけを認めていますが、CSS2では、バックスラッシュに続く「16進数表記文字は6文字」です。
　もっといえば、CSS2はエスケープシーケンス区切り文字としてのホワイトスペースを許可していますが、例えば、[\abcdef]とエスケープされた16進数表記6文字があった場合、CSS1では、16進数表記4文字として扱ってしまうのでこれを[\abcd]と残りを1バイトで区切り[e]と[f]という具合に3つに区切ってしまい、CSS2では意図通り[\abcdef]という１つのものとして扱います。

進数・進法

・[TAB](ASCII文字では9)は、文字として認められませんが、CSS1で定義された文字には、フォント名とURLに限定されるものの[TAB]を文字として使う事ができてしまいますが、唯一この点に関しては、スタイルシートがフォント名に[TAB]を含んでいたとしてもCSS1とCSS2の非互換性を埋める事ができます。

・似たケースとしてラインフィードや改行[LF/CR]といった行終端文字はCSS1では文字として認められません。

・CSS2は、未知のユニットなどの不明な識別子のすぐ後に続く数値があった場合や区切り位置の違いで判断にあぐねるケースがあったとしても、その構成全体を(わからないのに)解析しようとしますが、CSS1は、「数値」と「識別子」を分割して解釈してくれます。
　つまり、CSS1では、[ 'font: 10pt/1.2serif' ]とあった場合、[ 'font: 10pt/1.2pt serif' ]として正しいと判断しますが、逆にCSS2では、[serif]の前にスペースが求められるのでエラーとなってしまいます。
　(また、ユーザーエージェントによっては、CSS1と同じ解釈をして、後者のCSS2で求めるような[serif]の前にスペースがあるものをエラーとするものもあります。。)

・CSS1では、クラス名を数値で始める事ができますが、CSS2では、これを認めていませんので未知な識別子として解析しようとします。
　しかし、数値で始まるクラス名というのは妥当なので、CSS2では、先頭の数値の前にエスケープ文字を付加(先頭の数値をエスケープ)する事によって利用する事ができます。
　(尚、次期バージョンのCSSでは新ユニットの追加によって数値で始まるクラス名を認めるという検討がなされています。)

CSS/スタイルシート情報

【CSS共通定義】文法と記述方法

CSS1/CSS 1.0

CSS3

2004-2008-someday