07
2013
06

浏览器工作原理 - CSS解析器

浏览器工作原理,我们很好奇CSS如何解析,还记得简介中提到的解析(浏览器解析原理的概念吗,不同于html,css属于上下文无关文法,可以用前面所描述的解析器来解析。Css规范定义了css的词法及语法文法。

  看一些例子:下面每个符号都由正则表达式定义了词法文法(词汇表):

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”是识别器的缩写,相当于一个class名,“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*] ')' ]
    ;


说明:一个规则集合有这样的结构

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


div.error和a.error时选择器,大括号中的内容包含了这条规则集合中的规则,这个结构在下面的定义中正式的定义了:

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

  这说明,一个规则集合具有一个或是可选个数的多个选择器,这些选择器以逗号和空格(S表示空格)进行分隔。每个规则集合包含大括号及大括号中的一条或多条以分号隔开的声明。声明和选择器在后面进行定义。


  Webkit CSS解析器(Webkit CSS parser)

  Webkit使用Flex和Bison解析生成器从CSS语法文件中自动生成解析器。回忆一下解析器的介绍,Bison创建一个自底向上的解析器,Firefox使用自顶向下解析器。它们都是将每个css文件解析为样式表对象,每个对象包含css规则,css规则对象包含选择器和声明对象,以及其他一些符合css语法的对象。

image

« 上一篇下一篇 »

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。