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

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

這就歸功于 CSS 了。

CSS 的誕生

20 世紀(jì) 90 年代蒂姆·伯納斯·李（Tim Berners-Lee）發(fā)明萬維網(wǎng)，創(chuàng)造 HTML 超文本標(biāo)記語言。此后網(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)頁也失去了語義化，維護(hù)代碼很艱難，因為代碼很混亂：

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

語法的確定

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

早期CSS語法提案

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

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

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

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

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

當(dāng)前CSS語法

CSS 歷史大事記

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

緊接著，他們在芝加哥的Mosaic and the Web 大會上第一次正式提出了 CSS 的建議，1995 年他們一起再次展示了這個建議。當(dāng)時 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 的第二個版本，目前的主流瀏覽器都采用這標(biāo)準(zhǔn)。

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

2005 年 12 月，W3C 開始 CSS3 標(biāo)準(zhǔn)的制定，到目前為止該標(biāo)準(zhǔn)還沒有最終定稿。

IE6，前端工程師的痛

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

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

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

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

IE6 Hacks和解決方案

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

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

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

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

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

只需要使用一個額外的 <div> 標(biāo)簽

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

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

文章題目：CSS 二十年發(fā)展簡史
標(biāo)題URL：http://www.rwnh.cn/news47/45747.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、用戶體驗、搜索引擎優(yōu)化、網(wǎng)頁設(shè)計公司、手機網(wǎng)站建設(shè)、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)