Webkit核心探究【2】——Webkit CSS實現

註：【轉載請註明文章來源、保持原樣】

出處：http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 請
作者：李嘉昱

CSS在Webkit中的實現屬於相對獨立的一個模組，注意這裡說的是相對。

CSS在Webkit中的作用自然是不言而喻的，在Web早期，文檔的結構和樣式還未分離的那個時代，HTML擔負了文檔的結構和樣式這兩個雙重任 務，即HTML既負責文檔的結構，同時文檔的樣式也通過HTML中通過標籤的屬性來指定。可想而知，在那個時候HMTL頁面的開發和使用比起現在而言是多 麼的不便。

不過仔細想想，這恐怕與當時的技術發展程度有著很大大關，首先，那個時候互連網遠不像現在這樣普及，另外，網頁也遠不如現在這樣複雜，不像現在， 可以說，世界上資訊的主要傳播方式是以網頁形式出現的，沒資料說明，但我覺得至少趨勢是這樣的。 就這樣，互連網在不斷的前進之中，直到後來CSS的出現，大大的改進了Web的開發模式，從此，文檔的結構和樣式被清晰的一分為二。HTML主要負責文檔 的結構，而CSS則擔負著文檔的樣式指定。

關於CSS的介紹網上已經有很多了，在這裡將主要從Webkit實現的角度對其進行介紹。

CSS是什麼

CSS是Cascading Style Sheets的縮寫，按照官方定義，它可以被認為是一個樣式表語言，它允許使用者通過它來為結構化文檔(HTML文檔)指定樣式。通過使用CSS使用者可以將文檔的內容和樣式分離，從而簡化Web頁面的開發和維護。

既然說它是一個樣式表語言，那麼它就有相應的文法規則，規定了如何如何來書寫一個樣式表，讓其作用與文檔內容達到書寫者想要的外觀。CSS的文法規 則是比較簡單的， 自頂向下的來看，一個階層式樣式表(CSS)是由一系列的規則(rule)組成的, 每一條規則又是由一個選取器(selector)和若干條聲明(Declearation)組成的。每條聲明(Declearation)又是一個索引值 對，由屬性(property)和值(value)來組成，如所示。

 

原圖片出處:http://dabrook.org/cc/Basic-Anatomy-of-a-CSS-Rule.png

從這裡可以看到，文法是很簡單的，使用起來也確實很簡單。注意，我在這裡只是說使用簡單，就跟鉛筆一樣，誰都會用，鉛筆的使用當然是簡單的不能再簡 單了，但是就是這樣普通的工具，在專業人士和普通人的手裡所能創造出的東西是截然不同的。所以我想說的是，你能很快的學會如何使用CSS並不代表你編織出 漂亮的網頁，它只是一個工具，能發揮到什麼程度還得看人。

轉回來，從其簡單的文法來看，似乎是只要簡單的將其轉化為對應的程式設計模型即可，但實際中，CSS的實現還是比較複雜的，其複雜性就在於，CSS 本身的複雜程度，它定義了一系列的規則來決定為哪些元素來指定樣式，以及樣式的繼承關係，哪些是繼承的，哪些是非繼承的，以及作用於同一個元素的多個樣式 的疊加，還有就是它對所有能指定的樣式都有完整的對應的屬性集。所以從實現的角度來看，一個完整的，相容於標準的CSS實現，需要顧及到的東西還是很多 的。

CSS實現模型

webkit css部分的實現代碼為於目錄webcore/css中，算是webkit中一個相對獨立的模組，下面類圖是我為了更好的瞭解css實現所作，大致勾勒出了CSS的內部實現。

使用者所書寫的css文檔，最終會轉化為webkit內部的模型表示，這裡有幾個比較重要的類。

(待續...)

CSS預設樣式表

從Webkit CSS的實現可以看到，即使你不指定任何樣式表，實際上當CSS模組運作起來的時候，它都會載入幾張預設的樣式表，要知道，在 CSSStyleSelector的建構函式中，總是會調用loadDefaultStyle()這個函數，其作用就是載入預設的樣式表。

這些預設的樣式表包含了一些HTML元素的最基本的樣式資訊。相信在使用css的使用者中，大多數人都不會在對<div>指定樣式的時候 會為其添加一條display:block吧，是啊，幾乎所有使用css html的人都知道div是一個區塊層級元素，所以沒人會多此一舉，但是通過瞭解其CSS模組的具體實現，我們可以知道，這些個預設的樣式表其實就已經為我們 指定了一系列我們認為的想當然的規則。

這四個預設樣式表是

• html4UserAgentStyleSheet
• quirksUserAgentStyleSheet
• svgUserAgentStyleSheet
• sourceUserAgentStyleSheet

額，從名字上大致也能夠瞭解1, 2了吧，它們不是以檔案形式儲存，而是在CSS中以字元數組的形式出現，也就是說作為資料編到代碼裡面去了，應該是考慮到每次都要使用預設樣式表而為了減少I/O造成的效能損失。

為了說明我前面所說的，這些預設樣式表描述的都是些個關於HTML元素的最基本的資訊，還是來看個例子吧，

比如說html4UserAgentStyleSheet，從名字上可以看到，這張應該就是傳說中的瀏覽器預設樣式表了。看看都有些啥吧，這裡只截取個片段。

 

 1 html {
 2     display: block
 3  }
 4 
 5 head {
 6     display: none
 7  }
 8 
 9 meta {
10     display: none
11  }
12 
13 title {
14     display: none
15  }
16 
17 link {
18     display: none
19  }
20 
21 style {
22     display: none
23  }
24 
25 script {
26     display: none
27  }
28 
29 body {
30     display: block;
31     margin: 8px
32  }
33 
34 p {
35     display: block;
36     margin: 1.0__qem 0px
37  }
38 
39 div {
40     display: block
41  }
42 
43 layer {
44     display: block
45  }

 

html { display: block } head { display: none } meta { display: none } title { display: none } link { display: none } style { display: none } script { display: none } body { display: block; margin: 8px } p { display: block; margin: 1.0__qem 0px } div { display: block } layer { display: block }

從上面可以看出，真就是些最基本的屬性的指定，如果沒有這些預設值指定的話，使用者還得自行添加這些規則，那會很麻煩。

其他幾張表在此不作分析。

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 }

 

CSSRule* CSSParser::createStyleRule(CSSSelector* selector) { CSSStyleRule* rule = 0; if (selector) { rule = new CSSStyleRule(styleElement); m_parsedStyleObjects.append(rule); rule->setSelector(sinkFloatingSelector(selector)); rule->setDeclaration(new CSSMutableStyleDeclaration(rule, parsedProperties, numParsedProperties)); } clearProperties(); return rule; }

從該函數的實現可以很清楚的看到，解析器達到某條件需要建立一個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可參見我的其他文章）。

(...)

(待續..)