摘要：在的郵件列表中深埋著一封由寫(xiě)于年的不出名的郵件也是后來(lái)知名的瀏覽器和網(wǎng)景瀏覽器的合作開(kāi)發(fā)者。與此同時(shí)，在他開(kāi)發(fā)的網(wǎng)景瀏覽器中進(jìn)行了不同的嘗試。它被稱(chēng)為樣式層疊表，簡(jiǎn)稱(chēng)。隨后他們兩人制定了一個(gè)更為詳細(xì)的標(biāo)準(zhǔn)并向新創(chuàng)建的工作組求助推廣。

一直覺(jué)得自己沒(méi)學(xué)好css(事實(shí)上也許也是如此),經(jīng)常聽(tīng)說(shuō)js的歷史，但是好像對(duì)css的歷史卻一無(wú)所知。雖然歷史這類(lèi)內(nèi)容對(duì)實(shí)際的開(kāi)發(fā)也許沒(méi)有實(shí)際的幫助（不像學(xué)習(xí)了Flexbox,Grids就能馬上用到布局中），但是總覺(jué)得這也是一個(gè)前端工程師應(yīng)有的軟知識(shí)。所以看到本文的英文原文的時(shí)候就有了翻譯的沖動(dòng)，希望你讀完也能有收獲。
翻譯正文如下：

html和css是那么密不可分，以至于你可能會(huì)覺(jué)得它們是一起出現(xiàn)的。實(shí)際上，自1989年Tim Berners Lie發(fā)明互聯(lián)網(wǎng)后的多年中，這個(gè)世界上都不存在一個(gè)名為css的事物，web的原始版本根本就沒(méi)有提供一種裝飾網(wǎng)頁(yè)的方法。

在www的郵件列表中深埋著一封由Marc Andreessen寫(xiě)于1994年的不出名的郵件（Marc Andreessen也是后來(lái)知名的Mosaic瀏覽器和網(wǎng)景瀏覽器的合作開(kāi)發(fā)者）。在那封郵件中，Andreessen指出由于沒(méi)有辦法通過(guò)html裝飾一個(gè)網(wǎng)站，當(dāng)他被問(wèn)到視覺(jué)設(shè)計(jì)時(shí)，他唯一能告訴web開(kāi)發(fā)者的一句話是"sorry you"re screwed(對(duì)不起，你搞砸了)"。

不過(guò)，在隨后僅短短10年后，CSS就被一個(gè)現(xiàn)代的web社區(qū)全面采用，我們一起來(lái)看看，這一路發(fā)生了什么？

關(guān)于web如何布局存在很多種理論上的觀點(diǎn)。然而，這并不是Berners Lie 的優(yōu)先考慮事項(xiàng)，他在歐洲核子研究中心的雇主大多只對(duì)網(wǎng)絡(luò)感興趣，因此他們的主要精力也是集中在網(wǎng)絡(luò)上。不過(guò)，社區(qū)中的開(kāi)發(fā)者則提出了一些競(jìng)爭(zhēng)性的網(wǎng)頁(yè)布局理論，最顯著的理論分別來(lái)自Pei Yaun Wei，Andreesen和HakonWium Lie。

Pei-Yuan Wei在1991年創(chuàng)建圖形瀏覽器 ViolaWWW ，他整合了他自己提出的樣式語(yǔ)言到自己開(kāi)發(fā)的瀏覽器中，還期望自己的樣式語(yǔ)法最終能成為web關(guān)于樣式的官方標(biāo)準(zhǔn)。雖然這個(gè)目標(biāo)并未達(dá)到，但是他提出的樣式語(yǔ)法確實(shí)為其它的一些樣式語(yǔ)法提供了一些靈感。

與此同時(shí)，Andreessen 在他開(kāi)發(fā)的網(wǎng)景瀏覽器中進(jìn)行了不同的嘗試。他并沒(méi)有創(chuàng)建一種分離式的標(biāo)記語(yǔ)言，而是采取拓展HTML標(biāo)簽的方法來(lái)包含非標(biāo)準(zhǔn)化的HTML標(biāo)簽已達(dá)到裝飾網(wǎng)頁(yè)的目的。不幸的是，沒(méi)過(guò)多久，網(wǎng)頁(yè)就失去了所有的語(yǔ)義化并看起來(lái)像下面這樣混亂：

  
This would be some font broken up into columns

開(kāi)發(fā)者很快就意識(shí)到，這種嘗試是沒(méi)有前景的。隨機(jī)web社區(qū)產(chǎn)出了很多其它的替換方案，比如RRP--一種運(yùn)用縮寫(xiě)非常簡(jiǎn)潔的樣式表語(yǔ)言；PSL96--一種支持函數(shù)和狀態(tài)語(yǔ)句的語(yǔ)言。如果你對(duì)這些語(yǔ)言具體是什么樣子的感興趣，可以參考Zach Bloom 寫(xiě)的一篇非常優(yōu)秀的比較文章。

最終被大家采納的語(yǔ)言是由Hakon Wium 在 1994年 10月提出的樣式語(yǔ)法。它被稱(chēng)為樣式層疊表，簡(jiǎn)稱(chēng)CSS。

CSS最終勝出的主要原因是因?yàn)樗浅：?jiǎn)單，這一點(diǎn)在和它同時(shí)代的競(jìng)爭(zhēng)者比起來(lái)則更加明顯。早期的CSS語(yǔ)法如下：

window.margin.left = 2cm
font.family = times
h1.font.size = 24pt 30%

css是一種描述性的編程語(yǔ)言。當(dāng)我們寫(xiě)CSS時(shí)，我們并不會(huì)告訴瀏覽器具體該如何渲染網(wǎng)頁(yè)。相反，我們逐個(gè)寫(xiě)好描述HTML文檔的規(guī)則，讓瀏覽器來(lái)處理渲染。考慮到網(wǎng)絡(luò)主要是由業(yè)余程序員和雄心勃勃的愛(ài)好者構(gòu)建，CSS遵循了一種可預(yù)測(cè)的，包容性的格式，這樣任何人都可以輕易的使用它，這意味著就算部分語(yǔ)法有誤，CSS還是可以正常運(yùn)行，這是一種特性而非一個(gè)bug。

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

注意到上面最初CSS語(yǔ)法中的百分比沒(méi)？這其實(shí)是非常重要的一點(diǎn)，Lie相信，用戶和開(kāi)發(fā)者可能會(huì)采用不同的方法來(lái)定義樣式，瀏覽器則是兩者之間的中介，通過(guò)協(xié)商差異來(lái)呈現(xiàn)頁(yè)面。上面的百分比代表了樣式的權(quán)重，權(quán)重越低越容易被覆蓋。當(dāng)年Lie在初次展示CSS時(shí)，他甚至添加了一個(gè)滑塊，用以在瀏覽器中切換的用戶定義樣式和開(kāi)發(fā)者定義樣式。

在CSS提出的早期，這一點(diǎn)引起了大辯論，一些人認(rèn)為開(kāi)發(fā)者應(yīng)該具備對(duì)樣式完全的控制權(quán)限，其他人則認(rèn)為用戶應(yīng)該具備一定的控制權(quán)限。最終，為了提供更清晰的覆蓋規(guī)則這個(gè)百分比被移除了，不過(guò)這也是現(xiàn)代CSS中支持權(quán)重Specificity這一概念的原因。

不久后,Lie就發(fā)布了他的原始提案，他還在Bert Bos團(tuán)隊(duì)找到了一個(gè)合作者Bos，Bos是Argo瀏覽器的開(kāi)發(fā)者，他也指定了兼容自己瀏覽器的樣式語(yǔ)言，這種樣式語(yǔ)言之后部分也被融入到CSS中。隨后他們兩人制定了一個(gè)更為詳細(xì)的標(biāo)準(zhǔn)并向新創(chuàng)建HTML的工作組W3C求助推廣。

經(jīng)過(guò)多年的努力，到1996年底，CSS語(yǔ)法變成了下面這樣：

html {
  margin-left: 2cm;
  font-family: "Times", serif;
}

h1 {
  font-size: 24px;
}

CSS自此誕生了。

當(dāng)時(shí)由于CSS還只是是一個(gè)草案了，網(wǎng)景瀏覽器還是壓寶在拓展HTML標(biāo)簽上，他們使用了大量諸如multicol,layer,blink這類(lèi)的標(biāo)簽。IE則零碎的采用了部分CSS標(biāo)準(zhǔn)，不過(guò)他們的采用非常片面而且有時(shí)和標(biāo)準(zhǔn)比起來(lái)還是錯(cuò)誤的。這意味著，早期的CSS標(biāo)準(zhǔn)在經(jīng)過(guò)五年的官方推薦之后，市面上還是沒(méi)有完全支持它的瀏覽器。

第一次完整的兼容來(lái)自于一個(gè)非主流的地方。

當(dāng)Tantek Celik在1997年參加開(kāi)發(fā)Mac版本的IE瀏覽器時(shí)，他的團(tuán)隊(duì)還非常的小。一年后，他的團(tuán)隊(duì)人員被減半，他成為了他們團(tuán)隊(duì)渲染引擎方面的領(lǐng)導(dǎo)，當(dāng)時(shí)微軟的瀏覽器團(tuán)隊(duì)的大部分的精力集中在windows版的IE上，不過(guò)還好Mac版團(tuán)隊(duì)則只需要關(guān)注他們自己的設(shè)備。從2000年的IE5開(kāi)始，Celik和他的團(tuán)隊(duì)決定把焦點(diǎn)放在其他人還不關(guān)注的對(duì)CSS的兼容上。

Mac版的IE5花費(fèi)了該團(tuán)隊(duì)兩年的開(kāi)發(fā)時(shí)間，在此期間，Celik和使用相同設(shè)備的W3C成員及web開(kāi)發(fā)者交流頻繁，IE-for-Mac團(tuán)隊(duì)逐步驗(yàn)證了CSS的各方面。終于，在2002年3月，他們發(fā)布了Mac版的IE5，這是第一個(gè)支持完整CSS級(jí)別1的瀏覽器。

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

Celik知道，想讓CSS正常發(fā)揮作用，這些差距必須被調(diào)和。他在和CSS標(biāo)準(zhǔn)的倡導(dǎo)者 Todd Fahrner 交談后提出了文檔類(lèi)型切換，其使用方法你一定見(jiàn)過(guò)，如下：

上面是現(xiàn)代HTML5的寫(xiě)法，不過(guò)在以前，寫(xiě)文檔類(lèi)型還是有些繁瑣的，如下所示：

上面是一個(gè)符合標(biāo)準(zhǔn)的例子，其中的-//W3C//DTD HTML 4.0//EN是關(guān)鍵點(diǎn)，當(dāng)web開(kāi)發(fā)者添加這些到他自己的網(wǎng)頁(yè)時(shí)，瀏覽器就知道將使用"標(biāo)準(zhǔn)模式"standards mode來(lái)渲染頁(yè)面，CSS也的解析也將與規(guī)范一致。如果文檔類(lèi)型丟失或過(guò)期，瀏覽器將切換到“怪異模式”（quirks mode），根據(jù)舊盒子模型渲染內(nèi)容，采用老瀏覽器的非標(biāo)準(zhǔn)解析方式。在最初，一些開(kāi)發(fā)者甚至傾向于有意設(shè)置為怪異模式以獲得對(duì)老盒子模型的支持。

Eric Meyer(有時(shí)候被稱(chēng)為CSS之父)曾經(jīng)說(shuō)過(guò):文檔類(lèi)型切換拯救了CSS。也許他是對(duì)的，如果沒(méi)有文檔類(lèi)型切換，今天可能還需要用各種技巧來(lái)寫(xiě)CSS以實(shí)現(xiàn)兼容性。

還有一點(diǎn)需要多帶帶說(shuō)明，使用文檔類(lèi)型切換后，現(xiàn)代瀏覽器對(duì)老站點(diǎn)兼容完好，但是舊瀏覽器新站點(diǎn)的兼容性卻并不好（造成這種現(xiàn)象的主要原因是IE）。查看Box Model Hack你會(huì)發(fā)現(xiàn)Celik采用一個(gè)非常高明的技巧，它利用了一個(gè)非常少見(jiàn)的被稱(chēng)作voice-family的CSS屬性來(lái)欺騙瀏覽器用以實(shí)現(xiàn)在一個(gè)類(lèi)中添加多個(gè)寬高。Celik建議開(kāi)發(fā)者把舊盒子模型相關(guān)語(yǔ)法放在前面，然后在voice-family屬性中添加一個(gè)}來(lái)實(shí)現(xiàn)對(duì)標(biāo)簽的關(guān)閉，之后再寫(xiě)符合新盒子模型的寬度，如下所示：

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

voice-family在舊瀏覽器中無(wú)法識(shí)別，但是卻能解析定義的字符串，所以當(dāng)添加額外的}時(shí)，瀏覽器會(huì)在讀取第二個(gè)寬度之前停止解析。這種方式簡(jiǎn)單有效并使得大量的web開(kāi)發(fā)者開(kāi)始采用標(biāo)準(zhǔn)模式。

2001年微軟發(fā)布了IE6，雖然它最終還是成為了web開(kāi)發(fā)者的一大絆腳石，但它實(shí)際上帶來(lái)了一些非常令人印象深刻的對(duì)CSS標(biāo)準(zhǔn)的支持，考慮到它最終占據(jù)了高達(dá)80%的市場(chǎng)，它對(duì)CSS的推廣還是有一定的作用的。

標(biāo)準(zhǔn)有了，瀏覽器也有了，CSS進(jìn)入了生產(chǎn)模式。現(xiàn)在最需要的是人們開(kāi)始使用它。

過(guò)去十年里，web一直缺少一個(gè)標(biāo)準(zhǔn)的樣式語(yǔ)言，這并非意味著開(kāi)發(fā)者停止了開(kāi)發(fā)，實(shí)際上他們開(kāi)發(fā)出了一系列的瀏覽器hacks，比如基于表格進(jìn)行布局，引入flash并實(shí)現(xiàn)一些HTML不能做到的功能。兼容標(biāo)準(zhǔn)的CSS設(shè)計(jì)是一種新的趨勢(shì)，web 需要一些先驅(qū)者來(lái)運(yùn)用它們。

有兩個(gè)網(wǎng)站運(yùn)用了CSS進(jìn)行了重設(shè)計(jì)，它們只相隔幾個(gè)月出現(xiàn)，Wired（連線雜志）首先發(fā)布了自己的基于CSS標(biāo)準(zhǔn)的網(wǎng)站，之后不久ESPN也發(fā)布了基于CSS標(biāo)準(zhǔn)的網(wǎng)站。

Douglas Bowman 是Wired(連線雜志)的web設(shè)計(jì)團(tuán)隊(duì)負(fù)責(zé)人。在2002年時(shí)，Bowman和他的團(tuán)隊(duì)發(fā)現(xiàn)還沒(méi)有大型的網(wǎng)站在他們的開(kāi)發(fā)中使用CSS，Bowman覺(jué)得重新使用最新的兼容性的HTML和CSS來(lái)開(kāi)發(fā)Wired（連線雜志）是他對(duì)web社區(qū)的一種義務(wù)。他推動(dòng)著他的團(tuán)隊(duì)從頭開(kāi)始設(shè)計(jì)，在2002年9月，他們上線了重新開(kāi)發(fā)的站點(diǎn)。

ESPN在僅僅幾個(gè)月后也上線了他們重寫(xiě)設(shè)計(jì)后的站點(diǎn)，他們更大規(guī)模的運(yùn)用了CSS標(biāo)準(zhǔn)。這些網(wǎng)站壓賭在CSS上，甚至采用了一些當(dāng)時(shí)不被看好的CSS技術(shù)。但是所有的付出都贏得了回報(bào)，如果你去問(wèn)參與了重構(gòu)的開(kāi)發(fā)者，他們也許會(huì)滔滔不絕告訴你新標(biāo)準(zhǔn)帶來(lái)的各種好處。更高的性能，更方便更改，更容易分享，最重要的是，css還是web友善的。Wired最初甚至每日更換顏色主題。

雖然如果你現(xiàn)在去細(xì)看這些重構(gòu)后的代碼，還是會(huì)發(fā)現(xiàn)一些hacks。比如web還是只支持幾個(gè)不同尺寸的顯示器，你也許還會(huì)發(fā)現(xiàn)這兩個(gè)網(wǎng)站都使用固定寬度的列結(jié)合相對(duì)和絕對(duì)定位來(lái)進(jìn)行布局，使用圖片被用來(lái)替換文字。雖然存在這些缺陷，這些站點(diǎn)還是為接下來(lái)的開(kāi)發(fā)打下了基礎(chǔ)。他們是值得尊敬的先驅(qū)！

2003年，Jeffrey Zeldman 出版了他的書(shū) 《Designing with Web Standards》，這本書(shū)隨后成為了web開(kāi)發(fā)者學(xué)習(xí)CSS標(biāo)準(zhǔn)的手冊(cè)。書(shū)中去除了CSS的一些遺留技術(shù)和小技巧，最重要的是幫助web開(kāi)發(fā)者看到了使用CSS進(jìn)行樣式開(kāi)發(fā)所擁有的廣闊空間。一年后，Dave Shea發(fā)布了《CSS Zen Garden》，它鼓勵(lì)開(kāi)發(fā)者分離html和css。還該網(wǎng)站展示了最新的技巧和建議，并通過(guò)長(zhǎng)期的說(shuō)明來(lái)讓人們確信現(xiàn)在是采用標(biāo)準(zhǔn)的時(shí)代了。

現(xiàn)在，伴隨著緩慢而堅(jiān)定的勢(shì)頭，CSS越來(lái)越高級(jí)，并逐步加入了一些新屬性，瀏覽器也開(kāi)始競(jìng)相實(shí)現(xiàn)新標(biāo)準(zhǔn)，開(kāi)發(fā)人員不斷在自己的項(xiàng)目中運(yùn)用新特性，CSS真的成為了事實(shí)上的標(biāo)準(zhǔn)。就像很久之前它聲稱(chēng)的那樣。

A Look Back at the History of CSS(原文鏈接)

我的博客中本文的鏈接