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

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

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

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

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

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

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

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

  
This would be some font broken up into columns

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

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

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

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

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

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

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

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

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

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

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這類的標(biāo)簽。IE則零碎的采用了部分CSS標(biāo)準(zhǔn)，不過他們的采用非常片面而且有時(shí)和標(biāo)準(zhǔn)比起來還是錯(cuò)誤的。這意味著，早期的CSS標(biāo)準(zhǔn)在經(jīng)過五年的官方推薦之后，市面上還是沒有完全支持它的瀏覽器。

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

當(dāng)Tantek Celik在1997年參加開發(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上，不過還好Mac版團(tuán)隊(duì)則只需要關(guān)注他們自己的設(shè)備。從2000年的IE5開始，Celik和他的團(tuán)隊(duì)決定把焦點(diǎn)放在其他人還不關(guān)注的對(duì)CSS的兼容上。

Mac版的IE5花費(fèi)了該團(tuán)隊(duì)兩年的開發(fā)時(shí)間，在此期間，Celik和使用相同設(shè)備的W3C成員及web開發(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)都要求通過設(shè)置box-sizing的值來確定其是否被添加到寬高中。

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

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

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

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

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

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

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

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

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

過去十年里，web一直缺少一個(gè)標(biāo)準(zhǔn)的樣式語言，這并非意味著開發(fā)者停止了開發(fā)，實(shí)際上他們開發(fā)出了一系列的瀏覽器hacks，比如基于表格進(jìn)行布局，引入flash并實(shí)現(xiàn)一些HTML不能做到的功能。兼容標(biāo)準(zhǔn)的CSS設(shè)計(jì)是一種新的趨勢，web 需要一些先驅(qū)者來運(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)還沒有大型的網(wǎng)站在他們的開發(fā)中使用CSS，Bowman覺得重新使用最新的兼容性的HTML和CSS來開發(fā)Wired（連線雜志）是他對(duì)web社區(qū)的一種義務(wù)。他推動(dòng)著他的團(tuán)隊(duì)從頭開始設(shè)計(jì)，在2002年9月，他們上線了重新開發(fā)的站點(diǎn)。

ESPN在僅僅幾個(gè)月后也上線了他們重寫設(shè)計(jì)后的站點(diǎn)，他們更大規(guī)模的運(yùn)用了CSS標(biāo)準(zhǔn)。這些網(wǎng)站壓賭在CSS上，甚至采用了一些當(dāng)時(shí)不被看好的CSS技術(shù)。但是所有的付出都贏得了回報(bào)，如果你去問參與了重構(gòu)的開發(fā)者，他們也許會(huì)滔滔不絕告訴你新標(biāo)準(zhǔn)帶來的各種好處。更高的性能，更方便更改，更容易分享，最重要的是，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ì)定位來進(jìn)行布局，使用圖片被用來替換文字。雖然存在這些缺陷，這些站點(diǎn)還是為接下來的開發(fā)打下了基礎(chǔ)。他們是值得尊敬的先驅(qū)！

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

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

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

我的博客中本文的鏈接