css 簡介

前邊介紹 JavaScript 的簡史，本章我們介紹另一個跟 HTML 形影不離的技術 CSS，它的存在感視乎沒有 JavaScript 那么強。如果說 JavaScript 是用戶交互的發動機，那么 CSS 應該就是衣服了，主要工作是修飾網頁。

1. 歷史

1.1 質疑

當您想到 HTML 和 CSS 時，您可能會認為他們是一個共同體。事實上在 Tim Berners-Lee 于 1989 年首次創建萬維網之后的多年中，沒有發明過 CSS 之類的東西，最初的 HTML 根本無法使用樣式修飾網頁。

WWW 郵件列表的存檔中埋藏著一個臭名昭著的帖子，它是由 Marc Andreessen（網景瀏覽器聯合創世人） 于 1994 年編寫的。在帖子中，Andreessen 表示，由于無法用 HTML 對網站進行樣式設置，因此當被問及視覺設計時，他唯一可以告訴 Web 開發人員的是 “很麻煩。” 在 10 年后，CSS 逐漸被一個新的網絡社區全面采用。這期間發生了什么事？

1.2 尋找

關于如何修飾網頁歷史上很多人提出過很多質疑，但是，對于 Berners-Lee 來說，這并不是優先考慮的事情。相反，很多社區的網頁開發人員提出過幾種技術選型方案，其中最著名的是 Pei-Yaun Wei，Andreesen 和 H?konWium Lie。以 Pei-Yuan Wei 為例，他于 1991 年創建了圖形化的 ViolaWWW 瀏覽器，并且將自己的樣式表語言集成到了瀏覽器中，他期望將語言變成 Web 的正式標準。雖然最終沒有實現，但是為其后的樣式表規范提供了一些啟發。

ViolaWWW 發布的同時，Andreessen 在他自己的瀏覽器 Netscape Navigator 中采用了不同的樣式實現方法。他沒有創建專門用于網站樣式的修飾語言，而是僅擴展了 HTML 標簽元素及其屬性。不幸的是，這種方式似乎使得 HTML 的標簽變得極其復雜，看起來像這樣：

This would be some font broken up into columns

一時間百家爭鳴，各種技術方案應運而出，類似 RRP（一種支持縮寫和簡潔的樣式表語言）或 PSL96（一種實際上允許使用函數和條件語句的語言）一樣。這其中脫穎而出的想法是 H?konWium Lie 于 1994 年 10 月首次提出的，它被稱為層疊樣式表或 CSS。

1.3 css 出世

CSS 之所以脫穎而出，是因為它很簡單，特別是與某些最早的競爭對手相比。CSS 遵循一種可預見的，寬容的格式，幾乎任何人都可以使用它。但是，CSS 的比較特殊的是它允許樣式層疊，層疊意味著樣式可以繼承并覆蓋先前已聲明的其他樣式，同時它又允許在同一頁面上使用多個樣式表。

Lie 認為程序員和設計師都將在單獨的樣式表中定義樣式，瀏覽器可以充當兩者之間的一種中介，并協商差異以呈現頁面。css 剛剛推出時，業界具有很多爭議，爭議點就在于剛剛提到的寬松性。

不久后，Lie 找到了另外一個合伙人 Bert Bos，Bos 創建了自己的 Argo 瀏覽器，并在此過程中創建了他自己的樣式表語言，該樣式表語言最終進入了 CSS。兩者開始制定更詳細的規范，最終向 W3C 新建的 HTML 工作組尋求幫助?；ㄙM了幾年時間，到 1996 年底第一版 css 定稿。

1.4 應用到瀏覽器

在 CSS 還只是一個草案的時候，網景的瀏覽器已經支持了上述提到的具有復雜屬性標簽的 HTML 元素，如 multicol，layer 和可怕的 blink 標簽；另一方面，微軟的 Internet Explorer 已經采用了一些 CSS 零碎的方式。但是他們的支持參差不齊，有時甚至是錯誤的。在最初的 CSS 版本推出五年后，還沒有完全支持 CSS 的瀏覽器。

事情的轉機在 Tantek?elik 1997 年加入 Internet Explorer 之后。他成為了渲染引擎的首席開發人員。從 2000 年開發第 5 版開始，?elik 和他的團隊將重點放在 CSS 支持上。在此期間，?elik 經常使用他們的瀏覽器與 W3C 成員和 Web 設計人員交談，以確保它們正確無誤。最終，在 2002 年 3 月，他們交付了用于 Internet Explorer 5。第一個完全支持 CSS Level 1 的瀏覽器。

2. 原理

2.1 瀏覽器渲染

說到 css 的原理，就不能不提瀏覽器的渲染機制:

上圖可以看出，瀏覽器渲染可以分兩部分：

• HTML parser 生成 DOM 樹；
• css parser 生成 style rules

最后，dom 樹和 style rules 生成新的 render tree 渲染樹，然后繪制到瀏覽器中，展示出來。

2.2 css 解析器

上邊提到瀏覽器的渲染機制，可以看到 CSS 模塊負責 CSS 腳本解析，并為每個 Element 計算出樣式。Webkit 使用了自動代碼生成工具生成了相應的代碼，也就是說詞法分析和語法分析這部分代碼是自動生成的。這期間經歷了以下幾個步驟：

• 通過調用 CSSStyleSheet 的 parseString 函數，將上述 CSS 解析過程啟動，解析完一遍后，把 Rule 都存儲在對應的 CSSStyleSheet 對象中；
• 由于目前規則依然是不易于處理的，還需要將之轉換成 CSSRuleSet。也就是將所有的純樣式規則存儲在對應的集合當中，這種集合的抽象就是 CSSRuleSet；
• CSSRuleSet 提供了一個 addRulesFromSheet 方法，能將 CSSStyleSheet 中的 rule 轉換為 CSSRuleSet 中的 rule ；
• 基于這些個 CSSRuleSet 來決定每個頁面中的元素的樣式；

3. 優先、繼承原則

css 的解析遵循 2 個原則，優先原則和繼承原則。

• 優先原則：后解析的內容會覆蓋前邊解析的內容；

  • 同一個選擇器從上到下讀取 css 樣式；
  • 同一類選擇器從上往下執行；
  • 不同類型的選擇器優先級遵循先執行低優先級再執行高優先級；
  • 外部樣式與內部樣式合并之后一起執行，遵循從上往下的執行順序；
  • 內聯樣式最后執行 - 優先級最高；
  • 加！important 標識最后執行。

• 繼承原則 - 嵌套的標簽擁有外部標簽的部分樣式，子元素繼承父元素的樣式。

  • 文本相關的樣式被繼承，其他的不能繼承；
  • 塊元素的寬度默認繼承父元素的寬度，高度則自適應。

4. 瀏覽器兼容性

4.1 原因

兼容性問題是網站技術中老生常談的問題，包括 HTML、JavaScript、CSS 都會出現兼容性問題。導致這個問題的根本原因是不同的瀏覽器廠商的內核不同，導致對 CSS 的解析效果不一致，繼而顯示效果千差萬別。這里不去過分討論內核不兼容的深層次原理，而是討論一下大的解決思路，主要包括 4 個方面，瀏覽器 CSS 樣式初始化、瀏覽器私有屬性，CSS hack 語法和第三方插件。

4.2 定義默認樣式

由于瀏覽器的 CSS 默認的樣式都不一致，所以簡單有效的方式是手動定義其默認樣式。定義默認樣式主要針對父元素，因為子元素會繼承父元素的樣式，直接定義父元素的樣式簡單便捷，例如：

以上代碼針對全局的內外間距、HTML 元素的行高、body 元素的外間距、鏈接元素的背景色、圖片元素的邊框樣式做同一定義。

4.3 瀏覽器特有樣式

有些瀏覽器的內核有自己特有的 CSS 樣式，這種樣式只能被自己識別，利用這種特性可以定義一些 CSS 樣式用于兼容特有的瀏覽器版本，例如：

4.4 CSS Hack

Hack 類似于上邊提到的特有 CSS 樣式，區別在于 Hack 是針對標準的 CSS 加上特殊符號，用于被特有的瀏覽器識別，以下舉例：

以上舉了幾個代表性的 Hack 的例子，實際上花大力氣解決這些兼容性問題， 無非是給各個瀏覽器廠商填坑罷了，開發項目中一般不推薦使用過多的 Hack ，因為這會導致代碼生僻難懂，維護成本過高。

4.5 第三方庫

引入第三方庫可以解決一些兼容性問題，方便快捷，成本較低，使用時只需要通過引入其 CSS 庫文件即可，不過具體是否能解決百分之百的兼容性問題還需要具體使用測試。以下列舉一些第三庫：

4.5.1 respond.js

有些瀏覽器不支持 CSS 媒體查詢，要實現響應式設計難度較大，這個庫可以幫助解決不兼容媒體查詢，具體使用方式只要引用這個 JavaScript 庫即可，它的 GitHub 地址是 respond.js

4.5.2 rem.js

在 css3 中引入了字體單位 rem，這是一個相對單位，使用較為頻繁，但是一些老的瀏覽器不支持，所以需要引入第三方庫 rem.js，使用時只要引入 JavaScript 庫文件即可。

4.5.3 normalize.css

由于不同的瀏覽器對于一些 CSS 的默認樣式是不相同的，但是有時我們為了兼容性需要它們的默認展現形式一致，所以簡單的方案是引入一個 CSS 庫，它的地址是 normalize.css。

5. 小結

本章通過介紹 CSS 的歷史來源，讓大家了解了 CSS 的發展歷程，然后簡單說明了 CSS 在瀏覽器中渲染視覺樣式的原理，最后提到了 CSS 在不同瀏覽器的兼容性情況及其解決方案。