CSS 二十年發(fā)展簡史

在2019年的今天，我們能在網(wǎng)上看到炫酷的動畫加載，精彩絕倫的交互效果，以及從 PC 端到移動端的響應式交互，大家覺得習以為常?？赡悴恢赖氖?，在 20 多年前，網(wǎng)頁僅僅提供了文檔展示能力，沒有裝飾的它就像一張黑白報紙那樣簡陋。

你是否會問：網(wǎng)頁是如何變成像今天這樣精美的？

這就歸功于 CSS 了。

CSS 的誕生

20 世紀 90 年代蒂姆·伯納斯·李（Tim Berners-Lee）發(fā)明萬維網(wǎng)，創(chuàng)造 HTML 超文本標記語言。此后網(wǎng)頁樣式便以各種形式存在，不同的瀏覽器有自己的樣式語言來控制頁面的效果，因為最原始的 Web 版本中根本沒有提供一種網(wǎng)頁裝飾的方法。

ViolaWWW瀏覽器中的網(wǎng)頁

在HTML迅猛發(fā)展的 90 年代，不同的瀏覽器根據(jù)自身的 HTML 語法結(jié)構(gòu)來支持實現(xiàn)不同的樣式語言。在最初的 HTML 版本中，由于只含有很少的顯示屬性，所以用戶可以自己決定顯示頁面的方式。

但隨著 HTML 的發(fā)展，HTML 增加了很多功能，代碼也越來越臃腫，HTML 就變得越來越亂。網(wǎng)頁也失去了語義化，維護代碼很艱難，因為代碼很混亂：

于是裝飾網(wǎng)頁樣式的 CSS（層疊樣式表，Cascading Style Sheets）誕生了。

語法的確定

早期 CSS 的語法設計看上去類似后來的 JavaScript 語法（當時 JavaScript 尚未存在），實際上，CSS 的這個寫法借鑒了 X11 Window System 中的 X 資源。

早期CSS語法提案

在第一稿建議中，有一個影響百分比的說明符：h1.font.size = 20pt 80%。

行尾百分比的作用是想要通過這個百分比來控制該值的權(quán)重，如字號設置為 20pt，權(quán)重設置 80%，最終將字號值與權(quán)重組合在一起，值為 16pt。

這個寫法的設計初衷是想將開發(fā)者與用戶的要求與偏好組合到一起，CSS 之父哈肯·維姆·萊（Hkon Wium Lie） 提議 CSS 應該有一把滑尺，這樣開發(fā)者與用戶都有完全的控制力。當時這個提議引起了大家的討論，但由于這個辦法對如 font-size 等屬性管用，但對另一些屬性如 font-family 就不好用了，所以最終這個百分比的用法還是被舍棄了。

至于 CSS 的語法由 font.size 改成font-size，是怎么設計來的呢？首先，連字符讀起來更像書面英語，簡單易懂。其次，DSSSL（Document Style Semanticsand Specification Language，文檔樣式語義和規(guī)范語言） 和 DSSSL-Lite就使用這種連字符屬性名。于是，CSS 也從中借鑒了連字符。

經(jīng)過多年的努力 ，到1996年底，最終CSS語法變成了現(xiàn)在這個樣子：

當前CSS語法

CSS 歷史大事記

1994 年，Hkon Wium Lie 最初提出了 CSS 的想法，聯(lián)合當時正在設計 Argo 的瀏覽器的Bert Bos，他們決定一起合作設計 CSS，于是創(chuàng)造了 CSS 的最初版本。

緊接著，他們在芝加哥的Mosaic and the Web 大會上第一次正式提出了 CSS 的建議，1995 年他們一起再次展示了這個建議。當時 W3C 剛剛建立，W3C 對 CSS 很感興趣，為此專門組織了一次討論會。

1996 年 12 月，W3C 推出了 CSS 規(guī)范的第一版本。

1997 年，W3C 頒布 CSS1.0 版本 ，CSS1.0 較全面地規(guī)定了文檔的顯示樣式，可分為選擇器、樣式屬性、偽類 / 對象幾個部分。

這一規(guī)范立即引起了各方的關(guān)注，隨即微軟和網(wǎng)景公司的瀏覽器均能支持 CSS1.0，這為 CSS 的發(fā)展奠定了基礎(chǔ)。

1998 年，W3C 發(fā)布了 CSS 的第二個版本，目前的主流瀏覽器都采用這標準。

CSS2 的規(guī)范是基于 CSS1 設計的，包含了 CSS1 所有的功能，并擴充和改進了很多更加強大的屬性。包括選擇器、位置模型、布局、表格樣式、媒體類型、偽類、光標樣式。

2005 年 12 月，W3C 開始 CSS3 標準的制定，到目前為止該標準還沒有最終定稿。

IE6，前端工程師的痛

2001 年，微軟發(fā)布了 IE6，在 Windows 普及的年代 IE6 瀏覽器占據(jù)了高達 80% 的市場，這對 CSS 的標準推廣起著重要作用。

因為 IE6 的用戶量大，開發(fā)者們就選擇了以大眾為準，許多開發(fā)者竭盡全力把 IE6 下的頁面做好，甚至一些開發(fā)者的口號很響“Only IE6”。

這樣導致許多頁面根本不是 W3C 標準，因為 IE6 有一套自己的解析渲染體系。最終 IE6 的龐大市場最終成為了 Web 開發(fā)者的一大絆腳石。

作為當時的開發(fā)者，必須掌握的一系列瀏覽器 Hacks，網(wǎng)頁開發(fā)和面試必備。印象中當時經(jīng)典的 Bug是“江湖匪號：一只豬的故事”。

IE6 Hacks和解決方案

如今我們在當下高級瀏覽器中實現(xiàn)一個圓角按鈕是很簡單的事，但在當時不支持 CSS3 屬性的瀏覽器（IE6/7/8）中還得通過圖片背景切圖方法實現(xiàn)，如果按鈕的長度不確定的話，還得實現(xiàn)按鈕自適應長度，這也是考驗前端工程師的 CSS 使用技巧和磨練我們的耐性。

那些年我們前端工程師的收藏夾不僅收藏 CSS Hacks，還會收藏各種布局攻略，如圣杯布局，也叫雙飛翼布局，就是實現(xiàn)一個兩側(cè)寬度固定，中間寬度自適應的三欄布局，實現(xiàn)這些布局需要各種技巧和攻略。當時大牛們總結(jié)出的一些要點：

兩側(cè)寬度固定，中間寬度自適應

中間部分在 DOM 結(jié)構(gòu)上優(yōu)先，以便先行渲染

允許三列中的任意一列成為高列

只需要使用一個額外的