付録 G. CSS 2.2 の文法

この付録は規範的ではありません。

以下の文法はCSS 2.2の構文を定義しています。ただし、この文法はCSS 2.2のスーパーセットとも言えるものであり、この仕様は文法では表現されていない追加の意味的制約を課しています。適合するUAは、前方互換パーシング規則、セレクタの記法、プロパティと値の記法、および単位の記法にも従う必要があります。ただし、文法的に正しいすべてのCSSが有効になるわけではありません。例えば、HTMLは"クラス"属性の可能な値に制限を課しており、それがCSSには含まれない場合があります。

G.1 文法

以下の文法は LALR(1) です (ただし、ほとんどのUAは直接使用すべきではありません。この文法はパーシング規則ではなく、CSS 2.2の構文のみを表現しています)。生成規則の形式は人間が読むのに最適化されており、Yacc (参照 [YACC]) を超えた省略記法が使用されています:

*: 0回以上
+: 1回以上
?: 0回または1回
|: 選択肢の区切り
[ ]: グループ化

生成規則は以下の通りです:

stylesheet
  : [ CHARSET_SYM STRING ';' ]?
    [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]*
    [ [ ruleset | media | page ] [ CDO S* | CDC S* ]* ]*
  ;
import
  : IMPORT_SYM S*
    [STRING|URI] S* media_list? ';' S*
  ;
media
  : MEDIA_SYM S* media_list '{' S* ruleset* '}' S*
  ;
media_list
  : medium [ COMMA S* medium]*
  ;
medium
  : IDENT S*
  ;
page
  : PAGE_SYM S* pseudo_page?
    '{' S* declaration? [ ';' S* declaration? ]* '}' S*
  ;
pseudo_page
  : ':' IDENT S*
  ;
operator
  : '/' S* | ',' S*
  ;
combinator
  : '+' S*
  | '>' S*
  ;
property
  : IDENT S*
  ;
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration? [ ';' S* declaration? ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator? selector ]? ]?
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*]? ')' ]
  ;
declaration
  : property ':' S* expr prio?
  ;
prio
  : IMPORTANT_SYM S*
  ;
expr
  : term [ operator? term ]*
  ;
term
  : [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* ]
  | STRING S* | IDENT S* | URI S* | hexcolor | function
  ;
function
  : FUNCTION S* expr ')' S*
  ;
/*
 * colorには、"#"の後に3または6桁の16進数 (例: [0-9a-fA-F]) が必要です。
 * 例: "#000" はOKですが、"#abcd" はNGです。
 */
hexcolor
  : HASH S*
  ;

G.2 字句スキャナー

以下はトークナイザーであり、Flex (参照[FLEX]) 記法で記述されています。トークナイザーは大文字小文字を区別しません。

"\377" は、現在のFlexバージョンが扱える最大文字番号 (10進数で255) を表します。これは "\4177777" (10進数で1114111) として読み替えるべきで、これはUnicode/ISO-10646の最大可能コードポイントです。

%option case-insensitive

h		[0-9a-f]
nonascii	[\240-\377]
unicode		\\{h}{1,6}(\r\n|[ \t\r\n\f])?
escape		{unicode}|\\[^\r\n\f0-9a-f]
nmstart		[_a-z]|{nonascii}|{escape}
nmchar		[_a-z0-9-]|{nonascii}|{escape}
string1		\"([^\n\r\f\\"]|\\{nl}|{escape})*\"
string2		\'([^\n\r\f\\']|\\{nl}|{escape})*\'
badstring1      \"([^\n\r\f\\"]|\\{nl}|{escape})*\\?
badstring2      \'([^\n\r\f\\']|\\{nl}|{escape})*\\?
badcomment1     \/\*[^*]*\*+([^/*][^*]*\*+)*
badcomment2     \/\*[^*]*(\*+[^/*][^*]*)*
baduri1         {U}{R}{L}\({w}([!#$%&*-\[\]-~]|{nonascii}|{escape})*{w}
baduri2         {U}{R}{L}\({w}{string}{w}
baduri3         {U}{R}{L}\({w}{badstring}
comment		\/\*[^*]*\*+([^/*][^*]*\*+)*\/
ident		-?{nmstart}{nmchar}*
name		{nmchar}+
num		[-+]?[0-9]+|[-+]?[0-9]*"."[0-9]+
string		{string1}|{string2}
badstring       {badstring1}|{badstring2}
badcomment      {badcomment1}|{badcomment2}
baduri          {baduri1}|{baduri2}|{baduri3}
url		([!#$%&*-~]|{nonascii}|{escape})*
s		[ \t\r\n\f]+
w		{s}?
nl		\n|\r\n|\r|\f

A		a|\\0{0,4}(41|61)(\r\n|[ \t\r\n\f])?
C		c|\\0{0,4}(43|63)(\r\n|[ \t\r\n\f])?
D		d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])?
E		e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])?
G		g|\\0{0,4}(47|67)(\r\n|[ \t\r\n\f])?|\\g
H		h|\\0{0,4}(48|68)(\r\n|[ \t\r\n\f])?|\\h
I		i|\\0{0,4}(49|69)(\r\n|[ \t\r\n\f])?|\\i
K		k|\\0{0,4}(4b|6b)(\r\n|[ \t\r\n\f])?|\\k
L               l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
M		m|\\0{0,4}(4d|6d)(\r\n|[ \t\r\n\f])?|\\m
N		n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n
O		o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o
P		p|\\0{0,4}(50|70)(\r\n|[ \t\r\n\f])?|\\p
R		r|\\0{0,4}(52|72)(\r\n|[ \t\r\n\f])?|\\r
S		s|\\0{0,4}(53|73)(\r\n|[ \t\r\n\f])?|\\s
T		t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t
U               u|\\0{0,4}(55|75)(\r\n|[ \t\r\n\f])?|\\u
X		x|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\x
Z		z|\\0{0,4}(5a|7a)(\r\n|[ \t\r\n\f])?|\\z

%%

{s}			{return S;}

\/\*[^*]*\*+([^/*][^*]*\*+)*\/		/* ignore comments */
{badcomment}                         /* unclosed comment at EOF */

"<!--"		{return CDO;}
"-->"			{return CDC;}
"~="			{return INCLUDES;}
"|="			{return DASHMATCH;}

{string}		{return STRING;}
{badstring}             {return BAD_STRING;}

{ident}			{return IDENT;}

"#"{name}		{return HASH;}

@{I}{M}{P}{O}{R}{T}	{return IMPORT_SYM;}
@{P}{A}{G}{E}		{return PAGE_SYM;}
@{M}{E}{D}{I}{A}	{return MEDIA_SYM;}
"@charset "		{return CHARSET_SYM;}

"!"({w}|{comment})*{I}{M}{P}{O}{R}{T}{A}{N}{T}	{return IMPORTANT_SYM;}

{num}{E}{M}		{return EMS;}
{num}{E}{X}		{return EXS;}
{num}{P}{X}		{return LENGTH;}
{num}{C}{M}		{return LENGTH;}
{num}{M}{M}		{return LENGTH;}
{num}{I}{N}		{return LENGTH;}
{num}{P}{T}		{return LENGTH;}
{num}{P}{C}		{return LENGTH;}
{num}{D}{E}{G}		{return ANGLE;}
{num}{R}{A}{D}		{return ANGLE;}
{num}{G}{R}{A}{D}	{return ANGLE;}
{num}{M}{S}		{return TIME;}
{num}{S}		{return TIME;}
{num}{H}{Z}		{return FREQ;}
{num}{K}{H}{Z}		{return FREQ;}
{num}{ident}		{return DIMENSION;}

{num}%			{return PERCENTAGE;}
{num}			{return NUMBER;}

{U}{R}{L}"("{w}{string}{w}")" {return URI;}
{U}{R}{L}"("{w}{url}{w}")"    {return URI;}
{baduri}                {return BAD_URI;}

{ident}"("		{return FUNCTION;}

.			{return *yytext;}

G.3 CSS 2.2とCSS1のトークン化の比較

CSS1推奨仕様 ([CSS1]) と上記の構文にはいくつかの違いがあります。これらの多くはCSS2で新たに追加されたトークンによるものです。他の違いは、文法がより読みやすく書き直されたためです。ただし、一部の互換性のない変更は、CSS1構文における誤りと見なされました。以下に説明します。

CSS1スタイルシートは1バイト文字エンコーディング (例: ASCIIおよびISO-8859-1) のみを使用していましたが、CSS 2.2にはそのような制限はありません。実際には、CSS1トークナイザーを推測するのに大きな困難はなく、一部のUAは2バイトエンコーディングを受け入れています。
CSS1では、バックスラッシュ (\) の後に最大4桁の16進数を指定してUnicode文字を参照することができましたが、CSS2では6桁を許可しています。さらに、CSS2ではエスケープシーケンスを区切るために空白文字を使用できます。例: CSS1では文字列 "\abcdef" は3文字 (\abcd, e, f) で構成されますが、CSS2では1文字 (\abcdef) になります。
タブ文字 (ASCII 9) は文字列内で許可されていませんでした。ただし、CSS1では文字列はフォント名およびURLのためにのみ使用されていたため、スタイルシートにタブを含むフォントファミリー名が記載されている場合にのみCSS1とCSS2の間で非互換性が生じます。
同様に、新しい行 (バックスラッシュでエスケープ) はCSS1では文字列内で許可されていませんでした。
CSS2では、識別子に続く数値をDIMENSIONトークン (未知の単位) として解析しますが、CSS1では数値と識別子として解析していました。これにより、CSS1では宣言 'font: 10pt/1.2serif' は正しいものでしたが、CSS2では "serif" の前にスペースが必要です。
CSS1では、クラス名は数字で始めることができました (".55ft") が、CSS2ではそのようなクラスは未知の寸法として解析されます。CSS2では、".55ft" を有効なクラスとするには、最初の数字をエスケープする必要があります (".\35 5ft")。

G.4 実装メモ

セクション 4.1.1でのCSSコア構文の字句スキャナーは、バックアップなしのスキャナーとして実装できます。Lex記法では、以下のパターンを追加する必要があります (これにより返されるトークンは変わりませんが、スキャナーの効率が向上します):

{ident}/\\          return IDENT;
#{name}/\\          return HASH;
@{ident}/\\         return ATKEYWORD;
#/\\                return DELIM;
@/\\                return DELIM;
@/-                 return DELIM;
@/-\\               return DELIM;
-/\\                return DELIM;
-/-                 return DELIM;
\</!                return DELIM;
\</!-               return DELIM;
{num}{ident}/\\     return DIMENSION;
{num}/\\            return NUMBER;
{num}/-             return NUMBER;
{num}/-\\           return NUMBER;
[0-9]+/\.           return NUMBER;
u/\+                return IDENT;
u\+[0-9a-f?]{1,6}/- return UNICODE_RANGE;