CSS簡史（譯）

時間  2019-11-07
標籤 css 簡史 欄目 CSS 简体版
原文   原文鏈接

一直以爲本身沒學好css(事實上也許也是如此),常常據說js的歷史，可是好像對css的歷史卻一無所知。雖然歷史這類內容對實際的開發也許沒有實際的幫助（不像學習了Flexbox,Grids就能立刻用到佈局中），可是總以爲這也是一個前端工程師應有的軟知識。因此看到本文的英文原文的時候就有了翻譯的衝動，但願你讀完也能有收穫。css

翻譯正文以下：html

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

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

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

web在尋找一種標記語言

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

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

ViolaWWW示例

與此同時，Andreessen 在他開發的網景瀏覽器中進行了不一樣的嘗試。他並無建立一種分離式的標記語言，而是採起拓展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 寫的一篇很是優秀的比較文章。windows

最終被你們採納的語言是由Hakon Wium 在 1994年 10月提出的樣式語法。它被稱爲樣式層疊表，簡稱CSS。瀏覽器

咱們爲何要使用CSS

CSS最終勝出的主要緣由是由於它很是簡單，這一點在和它同時代的競爭者比起來則更加明顯。早期的CSS語法以下：

window.margin.left = 2cm
font.family = times
h1.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語法變成了下面這樣：

html {
  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 交談後提出了文檔類型切換，其使用方法你必定見過，以下：

<!DOCTYPE html>

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

<!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屬性中添加一個}來實現對標籤的關閉，以後再寫符合新盒子模型的寬度，以下所示：

div.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月，他們上線了從新開發的站點。

第一個徹底運用CSS的大型站點

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

採用CSS的ESPN

雖然若是你如今去細看這些重構後的代碼，仍是會發現一些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真的成爲了事實上的標準。就像好久以前它聲稱的那樣。

有用的連接

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程