How Broswers Work<二>渲染引擎--CSS解析

回忆一下在介绍解析时讲的概念，不像HTML一样，CSS符合上下文无关文法而且能被前面讲的两种解析类型解析。在CSS规格说明书中定义了CSS的词汇和语法，详细见http://www.w3.org/TR/CSS2/grammar.html.

让我们先看一个例子：

词汇被下面的正则表达式定义：

comment     \/\*[^*]*\*+([^/*][^*]*\*+)*\/
num     [0-9]+|[0-9]*"."[0-9]+
nonascii    [\200-\377]
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}
name        {nmchar}+
ident       {nmstart}{nmchar}*

“ident“是”identifier“的缩写，像一个类的名一样。”name“是以一个id（与#相关）。

代表该语言规则的BNF：

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*] ')' ]
;

说明： 一个规则集合（ruleset）的结构如下：

div.error , a.error {
color:red;
font-weight:bold;
}

div.error和a.error是选择器。在花括号里的规则被这个规则集合应用。这个结构的定义如下：

ruleset
: selector [ ',' S* selector ]*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;

这就意味着ruleset是一个选择器或者多个被逗号或空格分离的解析器（S 可替代空格）。一个ruleset包含整个花括号的内容并且在他的内部是一个规则说明或者是多个用分号分开的规则说明。规则说明和选择器将在下面用BNF定义。

Webkit CSS parser

Webkit使用Flex and Bison 解析生成器自动生成CSS 解析器来解析CSS文件。回忆一下前面讲到的，Bison可生成一个自底向上的解析器。Firefox用的是一个自顶向下的程序员写出的解析器。两种解析器都会将CSS文件解析后转化成一个StyleSheet 对象，StyleSheet 对象都包含CSS规则。CSS规则的对象包含选择器和规则说明对象和其他与CSS语法一致的对象。



Figure 7: parsing CSS