CSS の構文解析

[10] CSS では構文解析の方法が仕様により定められており、どのようなバイト列、文字列であってもそれが CSS スタイルシートとしてどう解釈されるべきかが明確になっています。

[11] 本項では構文解析器 (利用者エージェント) の動作について扱います。構文一般について、あるいは著者の要件については CSSの構文の項をご覧ください。

仕様書

[4] CSS Syntax Module Level 3 (2013-06-29 19:17:26 +09:00 版) <http://dev.w3.org/csswg/css-syntax/>
- [34] CSS Syntax Module Level 3 (2014-09-05 21:35:03 +09:00 版) <http://dev.w3.org/csswg/css-syntax/#parse-grammar>

文字符号化の処理

[41] CSSにおける文字コード参照。

入口点

[5] css-syntax ではいくつかの入口点 (entry point) (構文解析器の動作開始点) を定義しています。

[6] この他にも次のような入口点があります。

[22] 選択子群 / parse a group of selectors / parse a selector
- selectorText
- querySelector, querySelectorAll
- >>21 を特定の文法に従い解釈するもの
[23] 相対選択子 / parse a relative selector
- find, findAll
- matches
- >>21 を特定の文法に従い解釈するもの
[24] ページ選択子リスト / parse a list of CSS page selectors
- CSSPageRule selectorText
- >>21 を特定の文法に従い解釈するもの
[25] 媒体クエリーリスト / parse a media query list
- media 属性
- mediaText
- CSSMediaRule conditionText
- >>21 を特定の文法に従い解釈するもの
[26] 媒体クエリー / parse a media query
- appendMedium
- >>25 で媒体クエリー1つの指定のみ受け付けるもの
[27] CSS宣言ブロック / parse a CSS declaration block
- style 属性
- CSSStyleDeclaration cssText
- >>19 で宣言をプロパティーの指定として解釈するもの
[28] 特性値 / parse a CSS value
- setProperty
- CSSStyleDeclaration の CSS特性を反映する属性
- SVG の CSS特性に対応する表現的属性
- animate (attributeType CSS)
- >>21 を特定の文法に従い解釈するもの
[29] 対応条件
- CSSSupportsRule conditionText
- CSS.supports
- >>21 を特定の文法に従い解釈するもの
[30] <color>
- fillStyle, strokeStyle, addColorStop, shadowColor, meta-theme-color
  - parse a CSS <color> value = >>20 を特定の文法に従い解釈するもの
- <link color>
  - 仕様書なし
[31] >>35 + <'font'>
- DrawingStyle font
[32] 'cursor'
- addHitRegion
[33] <source-size-list> / valid source size list / parse a sizes attribute
- picture の source の sizes
- >>21 を特定の文法に従い解釈するもの
[40] <filter-function-list>
- canvas の filter

[35] css-syntax には parse something according to a CSS grammar という手順が定義されており >>34、他の仕様書から CSS 系の文字列の構文解析を行う際に呼び出されます >>36。入力は文字列、字句の列、 component value の列のいずれかです。出力は構文に依存する構文解析結果か、失敗かのいずれかです。この手順が呼び出されると、 >>21 により構文解析し、その結果得られた component value を指定された文法により処理します。

スタイルシートの読み込みと DOM

[7] CSSOM へは sheet 属性からアクセスできますが、 HTML DOM とは異なり読み込み途中の状態にはアクセスできないようです。

[8] スタイルシートには style sheet ready フラグ <http://www.whatwg.org/specs/web-apps/current-work/#styling> があり、適用の準備ができるまではこのフラグが未設定になっています。具体的にどの時点で準備ができたといえるのか明確にはなっていませんが、普通に考えれば構文解析が完了してブラウザー内部のデータ構造となり、カスケーディングの対象となったり、 CSSOM のオブジェクトとして利用可能になったりした時点でしょう。

[9] 通常のスタイルシートの場合、 style sheet ready フラグが設定されるまではスクリプトの実行がブロックされます。代替スタイルシートではブロックされません。 (WinIE10 では代替スタイルシートでもブロックされます。) なのでスクリプトから CSSOM にアクセスしようとしても、完全な CSSOM が返されるか、 null が返されるかのどちらかのようです。

歴史

[12] CSS1 と CSS2、さらに 2000年代までの CSS3 (css3-syntax) では Flex と Yacc により形式的に構文が記述されていましたが、参考であり、また様々な制約から不正確でした。規定としては英語で構文および前方互換構文解析規則が説明されており、また各特性の値は専用の文法記述方法が用いられていました。

[14] このように構文と構文解析に関する規定が詳細に説明されているだけでも当時としては十分先進的ではありましたが、 Flex によって記述された字句化とよりマクロな構文の対応関係が不明瞭で <an+b> のような災厄をもたらしたり、前方互換構文解析規則の細部が不明確であったりというような問題を抱えていました。