Appendix C : CSS の構文解析

 CSS における構文解析は,その後の拡張を考慮した作りになっている。また,誤りに対してブラウザは通常エラーはを返さないので,その構文解析を知っておくと間違った CSS を書いている箇所の特定を行うさいに有効である。

CSS1 の構文

 CSS1 の構文についてまとめておこう。

■ 文字について

■ 構文について

以上が概要である。簡単のため厳密性を欠いた書き方もされているが,実用上はこれでよかろう。正確で詳細な構文についての解説は W3C の仕様書をご覧いただきたい。

CSS1 の構文解析

 CSS1 の構文解析はこれからの拡張性を考慮しており,それをひとことで言うと“無効な記述はそっくり無視をする”である。たとえば CSS2 の新属性は CSS1 にとっては無効な記述で,これにいちいちエラーを出していてはらちがあかない。そこで,無効な部分を無視して CSS1 相当分はとりあえず反映させよう,という考え方なのである。

 このような事情もあって,CSS の誤りは見つけにくいことが多い。そこで,構文解析のルールをおよそ知って,誤り箇所を的確に絞り込むワザを身につけたい。

 まず,“知らない属性が出てきたらその属性についての宣言はそっくり無視をする”。

.push { background: #999; border: outset #666; color: #FFF; cursor: pointer; }

上の記述で cursor 属性は CSS1 にはないから,斜字部分は無視される。

 “属性に対する値が一部でも無効な値を含んでいた場合は,それが指定された属性についての宣言はそっくり無視される”。

H1 EM.upper { font-weiget: "bold"; color: navy; vertical-align: 0.5em; }

CSS1 では原則として値は引用しないので,"bold" は無効と解される。また,vertical-align 属性に長さを直接与えることはできない。したがって斜字部分は無視され,“color: navy;”しか残らない。

 指定と指定の間のセミコロンを忘れると,次の属性名が値と勘違いされ,前後の指定とともに無効になってしまう。

 “セレクタの指定が無効だと,そのセレクタを含む命令そのものがすべて無効になる”。

H1, EM * green { color: green; }

残念ながらこれは H1 への指定分も含めて全部無効になってしまう。

 “at 命令は,その名前が無効だと,区切りのセミコロンまであるいは指定のための中かっこ内をすべて無効とする”。

@font-face { font-family: "Custom Font", src: url(http://fontvendor.com/custom.eot); }
H1 { color: red; }

CSS1 は @font-face 命令を“知らない”ので,中かっこ内も含めて無効になる。

 “@import 命令は,もしそれ以前に(無効なものでも)@import 命令以外の命令があったら無効になる”。すなわち,@import 命令はスタイルシートの冒頭に集中的に書かれなくてはならない。

@import url(default.css);
#subject { font-size: 150%; }
@import url(business.css);
#name { text-align: right; }

3 行めの @import 命令はそれ以前に“#subject { ... }”という @import 以外の命令があるから無効になる。これがスタイルシートの冒頭部分であるならば,当然 1 行めの @import 命令は有効である。

 CSS1 で無効とされた記述でも,後の CSS の規格で有効になるものがあることに気をつけていただきたい。実際,上にあげた例のうちいくつかは現時点,CSS2 の機能が一部先取りされた,たとえば Internet Exoplorer 4.0 以降では有効である。

 これから CSS を組むにおいて,多かれ少なかれ気づかぬ誤りに悩まされることがあるだろう。そんなとき,CSS の構文解析規則をおよそでも知っていればその修正も容易になるに違いない。また,誤り修正にあたっては,怪しい箇所をコメントアウト(/* ... */)してみるのもひとつの手段である。

 CSS を利用したすばらしい WWW パブリッシングを満喫されることを願ってやまない。