[转]Webkit内核探究【2】——Webkit CSS实现（2）

猫性男孩

从上面可以看出，真就是些最基本的属性的指定，如果没有这些默认值指定的话，用户还得自行添加这些规则，那会很麻烦。

其他几张表在此不作分析。

CSS解析

CSS使用的时候，只需要将按照其语法规范，书写一个规则集合，然后保存为一个.css文件，在html中引用即可，当然这里使用的是外部样式表的方式，只是使用CSS的一种方式，在这里我不打算讨论CSS的几种使用方式，所以都按外部的来。

那么这种按照语法规则书写的CSS样式表式如何转换为Webkit内部的CSS模型的呢，这自然需要通过词法语法分析。在这里，Webkit使用了 自动代码生成工具生成了相应的代码，也就是说词法分析和语法分析这部分代码是自动生成的，但它们不够完整，然后我们需要自己写一些配合性的代码才能让真个 CSS模块工作起来，说的再白一些，就是需要我们自己是写一些函数让那些个自动生成的代码来Call Back，用过其他各类解析器的朋友们应该很熟悉这个吧。如果谁对这部分代码有兴趣，可以研究一下。我倒是曾经为找一个跨平台的bug调过这部分代码，结 构还是蛮简单的，代码看起来稍多了些。入口是yylex和yyparse，有兴趣可以自己看看。

那么Webkit中实现的这些个Call Back们在哪里呢？就在CSSParser中了，显然，刨去生成的代码不说，需要手工完成的CSS解析代码部分就是这个了。CSS的一些解析功能的入口 也在此处，它们会调用lex,parse等生成代码。相对的，生成代码中需要的Call Back也需要在这里实现。

举例来说，现在可以来看一个较大单位的回调函数的实现，createStyleRule(),该函数将在一般性的规则需要被建立的时候调用。

1 CSSRule * CSSParser::createStyleRule(CSSSelector * selector)
2 {
3 CSSStyleRule * rule = 0 ;
4 if (selector) {
5 rule = new CSSStyleRule(styleElement);
6 m_parsedStyleObjects.append(rule);
7 rule -> setSelector(sinkFloatingSelector(selector));
8 rule -> setDeclaration( new CSSMutableStyleDeclaration(rule, parsedProperties, numParsedProperties));
9 }
10 clearProperties();
11 return rule;
12 }

从该函数的实现可以很清楚的看到，解析器达到某条件需要创建一个CSSStyleRule的时候将调用该函数，该函数的功能是创建一个 CSSStyleRule，并将其添加已解析的样式对象列表m_parsedStyleObjects中去，这里的对象就是指的Rule。那么如此一来， 经过这样一番解析后，作为输入的样式表中的所有Style Rule将被转化为Webkit 的内部模型对象CSSStyleRule对象，存储在m_parsedStyleObjects中，它是一个Vector。

像这样的函数还有createCharsetRule，createImportRule，createMediaRule等等，它们的作用大体上和createStyleRule类似，都是为创建Rule而准备的，只不过是不同类型的Rule。

了解了上面这些，大体上能够就能够了解CSS解析式怎么运作的。但是我们解析所要的结果是什么？通过调用CSSStyleSheet的 parseString函数，上CSS解析过程将启动，解析完一遍后，所有的Rule都将存储在对应的CSSStyleSheet对象中。但是这个时候的 规则依然是不易于处理的，需要将之转换为CSSRuleSet，CSSRuleSet提供了一个addRulesFromSheet方法，能将 CSSStyleSheet中的rule转换为CSSRuleSet中的rule，这样所有的纯样式规则都会放存储在对应的集合当中，这种集合的抽象就是 CSSRuleSet。以后就可以基于这些个CSSRuleSet来决定每个页面中的元素的样式了，后面会有介绍。

(...)

CSS如何作用于Render Tree

所谓的作用于Render Tree其实是指基于上面的解析成果来为相应的Render Object来指定特定的样式，这个样式的抽象就是RenderStyle（关于Render Tree可参见我的其他文章）。

(...)

(待续..)