在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 之父哈肯·維姆·萊（H?kon 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 年,，H?kon 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ī)范立即引起了各方的關注,，隨即微軟和網(wǎng)景公司的瀏覽器均能支持 CSS1.0,，這為 CSS 的發(fā)展奠定了基礎。

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和解決方案（圖片來自飄零霧雨 CSS 參考手冊）

如今我們在當下高級瀏覽器中實現(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)先,，以便先行渲染

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

只需要使用一個額外的 <div> 標簽

就這樣,，我們前端開發(fā)者練就了一身黑技能，直到微軟發(fā)布 IE6 死亡倒計時,。最先開始放棄 IE6 支持的是一線互聯(lián)網(wǎng)大公司,，如淘寶等，直到 2014 后,，大家逐漸放棄了對 IE6 的支持,，這簡直是對前端工程師最大的福音。

隨著 IE6 退出市場,，2014年,，微軟發(fā)布 IE10 版本。

2016年,，Chrome 瀏覽器占據(jù)全球瀏覽器排行榜首位,。隨著 Hybrid、React Native 等技術的興起,，互聯(lián)網(wǎng)進入移動端時代,，前端工程師開始新的挑戰(zhàn)，忙碌于適配各種端,。

我回首自己做前端開發(fā)的這十年來,，記得印象最深刻是，電腦中安裝的瀏覽器軟件是最多的，IE家族,、遨游,、QQ、360,、Chrome 瀏覽器等,。

我一般寫完一個項目后，自己先在所有瀏覽器跑一遍 CSS 的兼容性測試,，直到所有瀏覽器沒有大問題才能進行項目提測發(fā)布,。也正是有這樣的嚴謹?shù)墓ぷ鲬B(tài)度，使我在工作中也在不斷進步,。有時候,，回過頭想想有過這樣的經(jīng)歷也是一種技術財富的積累。

結(jié)語

CSS 經(jīng)歷了 20 多年的發(fā)展,，從 PC 端到移動端,，在前端工程化不斷進步的今天，隨著CSS的規(guī)范不斷的完善升級,，前端業(yè)務復雜度越來越高,，帶來的工程也越來越龐大，我們前端開發(fā)者對 CSS 工程化的方案也不斷地探索,。

現(xiàn)在一大批 CSS 預處理和后處理工具涌現(xiàn),，比較流行的 CSS 預處理器有 Sass、Less,，CSS 后處理器諸如 clean-css,、AutoPrefixer、Rework,、PostCSS 等,。

那么關于 CSS 將來發(fā)展會怎么樣？未來 CSS 還能不能勝任自己的角色,，會不會有新的模型代替它,？對于這些問題，H?kon Wium Lie 認為 CSS 目前還能夠勝任,，還沒有看到能夠取代它的新模型出現(xiàn),，新的技術肯定會層出不窮，但應該是對 CSS 的擴展而不是代替,。他還表示,，我們今天寫的 CSS 代碼，500 年后的計算機仍然能看懂,。

參考資料：

CSS 發(fā)展歷史及新特性

CSS 模塊和標準化進程

A Look Back at the History of CSS

CSS: It was twenty years ago today — an interview with H?kon Wium Lie