CSS簡史（譯）

05-18

CSS簡史（譯）

來自專欄 FrontEndInDepth

一直覺得自己沒學好css(事實上也許也是如此),經常聽說js的歷史，但是好像對css的歷史卻一無所知。雖然歷史這類內容對實際的開發也許沒有實際的幫助（不像學習了Flexbox,Grids就能馬上用到布局中），但是總覺得這也是一個前端工程師應有的軟知識。所以看到本文的英文原文的時候就有了翻譯的衝動，希望你讀完也能有收穫。
翻譯正文如下：

html和css是那麼密不可分，以至於你可能會覺得它們是一起出現的。實際上，自1989年Tim Berners Lie發明互聯網後的多年中，這個世界上都不存在一個名為css的事物，web的原始版本根本就沒有提供一種裝飾網頁的方法。

在www的郵件列表中深埋著一封由Marc Andreessen寫於1994年的不出名的郵件（Marc Andreessen也是後來知名的Mosaic瀏覽器和網景瀏覽器的合作開發者）。在那封郵件中，Andreessen指出由於沒有辦法通過html裝飾一個網站，當他被問到視覺設計時，他唯一能告訴web開發者的一句話是"sorry youre screwed(對不起，你搞砸了)"。

不過，在隨後僅短短10年後，CSS就被一個現代的web社區全面採用，我們一起來看看，這一路發生了什麼？

web在尋找一種標記語言

關於web如何布局存在很多種理論上的觀點。然而，這並不是Berners Lie 的優先考慮事項，他在歐洲核子研究中心的僱主大多隻對網路感興趣，因此他們的主要精力也是集中在網路上。不過，社區中的開發者則提出了一些競爭性的網頁布局理論，最顯著的理論分別來自Pei Yaun Wei，Andreesen和HakonWium Lie。

Pei-Yuan Wei在1991年創建圖形瀏覽器 ViolaWWW ，他整合了他自己提出的樣式語言到自己開發的瀏覽器中，還期望自己的樣式語法最終能成為web關於樣式的官方標準。雖然這個目標並未達到，但是他提出的樣式語法確實為其它的一些樣式語法提供了一些靈感。

與此同時，Andreessen 在他開發的網景瀏覽器中進行了不同的嘗試。他並沒有創建一種分離式的標記語言，而是採取拓展HTML標籤的方法來包含非標準化的HTML標籤已達到裝飾網頁的目的。不幸的是，沒過多久，網頁就失去了所有的語義化並看起來像下面這樣混亂：

html<MULTICOL COLS="3" GUTTER="25"> <P> <FONT SIZE="4" COLOR="RED"> This would be some font broken up into columns </FONT> </P></MULTICOL>

開發者很快就意識到，這種嘗試是沒有前景的。隨機web社區產出了很多其它的替換方案，比如RRP--一種運用縮寫非常簡潔的樣式表語言；PSL96--一種支持函數和狀態語句的語言。如果你對這些語言具體是什麼樣子的感興趣，可以參考Zach Bloom 寫的一篇非常優秀的比較文章。

最終被大家採納的語言是由Hakon Wium 在 1994年 10月提出的樣式語法。它被稱為樣式層疊表，簡稱CSS。

我們為什麼要使用CSS

CSS最終勝出的主要原因是因為它非常簡單，這一點在和它同時代的競爭者比起來則更加明顯。早期的CSS語法如下：

csswindow.margin.left = 2cmfont.family = timesh1.font.size = 24pt 30%

css是一種描述性的編程語言。當我們寫CSS時，我們並不會告訴瀏覽器具體該如何渲染網頁。相反，我們逐個寫好描述HTML文檔的規則，讓瀏覽器來處理渲染。考慮到網路主要是由業餘程序員和雄心勃勃的愛好者構建，CSS遵循了一種可預測的，包容性的格式，這樣任何人都可以輕易的使用它，這意味著就算部分語法有誤，CSS還是可以正常運行，這是一種特性而非一個bug。

CSS從某種程度上看又是獨一無二的，就像它的全名樣式層疊表中描述的那樣，CSS支持樣式級聯。級聯意味著樣式可以遵循一個特殊的規則繼承和覆蓋之前定義過的其它樣式，而且CSS還支持在同一個頁面上使用多個樣式表。

注意到上面最初CSS語法中的百分比沒？這其實是非常重要的一點，Lie相信，用戶和開發者可能會採用不同的方法來定義樣式，瀏覽器則是兩者之間的中介，通過協商差異來呈現頁面。上面的百分比代表了樣式的權重，權重越低越容易被覆蓋。當年Lie在初次展示CSS時，他甚至添加了一個滑塊，用以在瀏覽器中切換的用戶定義樣式和開發者定義樣式。

在CSS提出的早期，這一點引起了大辯論，一些人認為開發者應該具備對樣式完全的控制許可權，其他人則認為用戶應該具備一定的控制許可權。最終，為了提供更清晰的覆蓋規則這個百分比被移除了，不過這也是現代CSS中支持權重Specificity這一概念的原因。

不久後,Lie就發布了他的原始提案，他還在Bert Bos團隊找到了一個合作者Bos，Bos是Argo瀏覽器的開發者，他也指定了兼容自己瀏覽器的樣式語言，這種樣式語言之後部分也被融入到CSS中。隨後他們兩人制定了一個更為詳細的標準並向新創建HTML的工作組W3C求助推廣。

經過多年的努力，到1996年底，CSS語法變成了下面這樣：

```csshtml { margin-left: 2cm; font-family: "Times", serif;}h1 { font-size: 24px;}```

CSS自此誕生了。

瀏覽器的麻煩

當時由於CSS還只是是一個草案了，網景瀏覽器還是壓寶在拓展HTML標籤上，他們使用了大量諸如multicol,layer,blink這類的標籤。IE則零碎的採用了部分CSS標準，不過他們的採用非常片面而且有時和標準比起來還是錯誤的。這意味著，早期的CSS標準在經過五年的官方推薦之後，市面上還是沒有完全支持它的瀏覽器。

第一次完整的兼容來自於一個非主流的地方。

當Tantek Celik在1997年參加開發Mac版本的IE瀏覽器時，他的團隊還非常的小。一年後，他的團隊人員被減半，他成為了他們團隊渲染引擎方面的領導，當時微軟的瀏覽器團隊的大部分的精力集中在windows版的IE上，不過還好Mac版團隊則只需要關注他們自己的設備。從2000年的IE5開始，Celik和他的團隊決定把焦點放在其他人還不關注的對CSS的兼容上。

Mac版的IE5花費了該團隊兩年的開發時間，在此期間，Celik和使用相同設備的W3C成員及web開發者交流頻繁，IE-for-Mac團隊逐步驗證了CSS的各方面。終於，在2002年3月，他們發布了Mac版的IE5，這是第一個支持完整CSS級別1的瀏覽器。

文檔類型切換

還記得嗎，前面我們提到，windows版的IE也添加了對CSS的支持，但是他們的實現有一些bug和他們使用的盒子模型也和標準不一樣。windows的合資模型把border和pading等屬性在包含在元素的總寬高內，而標準都要求通過設置box-sizing的值來確定其是否被添加到寬高中。

Celik知道，想讓CSS正常發揮作用，這些差距必須被調和。他在和CSS標準的倡導者 Todd Fahrner 交談後提出了文檔類型切換，其使用方法你一定見過，如下：

html<!DOCTYPE html>

上面是現代HTML5的寫法，不過在以前，寫文檔類型還是有些繁瑣的，如下所示：

html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

上面是一個符合標準的例子，其中的-//W3C//DTD HTML 4.0//EN是關鍵點，當web開發者添加這些到他自己的網頁時，瀏覽器就知道將使用"標準模式"standards mode來渲染頁面，CSS也的解析也將與規範一致。如果文檔類型丟失或過期，瀏覽器將切換到「怪異模式」（quirks mode），根據舊盒子模型渲染內容，採用老瀏覽器的非標準解析方式。在最初，一些開發者甚至傾向於有意設置為怪異模式以獲得對老盒子模型的支持。

Eric Meyer(有時候被稱為CSS之父)曾經說過:文檔類型切換拯救了CSS。也許他是對的，如果沒有文檔類型切換，今天可能還需要用各種技巧來寫CSS以實現兼容性。

盒子模型的Hack

還有一點需要單獨說明，使用文檔類型切換後，現代瀏覽器對老站點兼容完好，但是舊瀏覽器新站點的兼容性卻並不好（造成這種現象的主要原因是IE）。查看Box Model Hack你會發現Celik採用一個非常高明的技巧，它利用了一個非常少見的被稱作voice-family的CSS屬性來欺騙瀏覽器用以實現在一個類中添加多個寬高。Celik建議開發者把舊盒子模型相關語法放在前面，然後在voice-family屬性中添加一個}來實現對標籤的關閉，之後再寫符合新盒子模型的寬度，如下所示：

cssdiv.content { width: 400px; voice-family: ""}""; voice-family: inherit; width: 300px;}

voice-family在舊瀏覽器中無法識別，但是卻能解析定義的字元串，所以當添加額外的}時，瀏覽器會在讀取第二個寬度之前停止解析。這種方式簡單有效並使得大量的web開發者開始採用標準模式。

標準設計的先驅

2001年微軟發布了IE6，雖然它最終還是成為了web開發者的一大絆腳石，但它實際上帶來了一些非常令人印象深刻的對CSS標準的支持，考慮到它最終佔據了高達80%的市場，它對CSS的推廣還是有一定的作用的。

標準有了，瀏覽器也有了，CSS進入了生產模式。現在最需要的是人們開始使用它。

過去十年里，web一直缺少一個標準的樣式語言，這並非意味著開發者停止了開發，實際上他們開發出了一系列的瀏覽器hacks，比如基於表格進行布局，引入flash並實現一些HTML不能做到的功能。兼容標準的CSS設計是一種新的趨勢，web 需要一些先驅者來運用它們。

有兩個網站運用了CSS進行了重設計，它們只相隔幾個月出現，Wired（連線雜誌）首先發布了自己的基於CSS標準的網站，之後不久ESPN也發布了基於CSS標準的網站。

Douglas Bowman 是Wired(連線雜誌)的web設計團隊負責人。在2002年時，Bowman和他的團隊發現還沒有大型的網站在他們的開發中使用CSS，Bowman覺得重新使用最新的兼容性的HTML和CSS來開發Wired（連線雜誌）是他對web社區的一種義務。他推動著他的團隊從頭開始設計，在2002年9月，他們上線了重新開發的站點。

ESPN在僅僅幾個月後也上線了他們重寫設計後的站點，他們更大規模的運用了CSS標準。這些網站壓賭在CSS上，甚至採用了一些當時不被看好的CSS技術。但是所有的付出都贏得了回報，如果你去問參與了重構的開發者，他們也許會滔滔不絕告訴你新標準帶來的各種好處。更高的性能，更方便更改，更容易分享，最重要的是，css還是web友善的。Wired最初甚至每日更換顏色主題。

雖然如果你現在去細看這些重構後的代碼，還是會發現一些hacks。比如web還是只支持幾個不同尺寸的顯示器，你也許還會發現這兩個網站都使用固定寬度的列結合相對和絕對定位來進行布局，使用圖片被用來替換文字。雖然存在這些缺陷，這些站點還是為接下來的開發打下了基礎。他們是值得尊敬的先驅！

CSS禪意花園和語義化的web

2003年，Jeffrey Zeldman 出版了他的書《Designing with Web Standards》，這本書隨後成為了web開發者學習CSS標準的手冊。書中去除了CSS的一些遺留技術和小技巧，最重要的是幫助web開發者看到了使用CSS進行樣式開發所擁有的廣闊空間。一年後，Dave Shea發布了《CSS Zen Garden》，它鼓勵開發者分離html和css。還該網站展示了最新的技巧和建議，並通過長期的說明來讓人們確信現在是採用標準的時代了。

現在，伴隨著緩慢而堅定的勢頭，CSS越來越高級，並逐步加入了一些新屬性，瀏覽器也開始競相實現新標準，開發人員不斷在自己的項目中運用新特性，CSS真的成為了事實上的標準。就像很久之前它聲稱的那樣。

有用的鏈接

A Look Back at the History of CSS(原文鏈接)
我的博客中本文的鏈接