網(wǎng)頁(yè)設(shè)計(jì)是變化非常快的行業(yè)。在過(guò)去一兩年，CSS3潛在地將網(wǎng)頁(yè)設(shè)計(jì)帶入了一個(gè)新的級(jí)別。這不僅僅是因?yàn)檫@個(gè)最新版本的CSS有很多新的功能特性，更重要的是因?yàn)镃SS3使得原來(lái)需要更多工作，更多技術(shù)以及更多軟件才能做到的事情變得更加簡(jiǎn)單。例如，基本的動(dòng)畫和動(dòng)態(tài)圖片功能（如顏色漸變）原來(lái)只能通過(guò)JavaScript和Flash來(lái)實(shí)現(xiàn)，并且圖片需要像Photoshop等的來(lái)編輯。現(xiàn)在不再需要了。

　　CSS3有許多需要學(xué)習(xí)的東西，如果你希望讓自己追上你身邊發(fā)生的事情可能會(huì)很崩潰。讓我們來(lái)看一下CSS3雖然不是所有流瀏覽器都支持（比如IE6）是如何可以實(shí)用地運(yùn)用到你的建站過(guò)程。

　　漸近增強(qiáng)

　　漸近增強(qiáng)是當(dāng)我們處于過(guò)渡期的重要概念，這個(gè)時(shí)期中，并不是所有用戶的瀏覽器都支持CSS3特性。漸近增強(qiáng)簡(jiǎn)單地說(shuō)就是我們可以為有更多功能的瀏覽器提供比使用非現(xiàn)代瀏覽器更強(qiáng)大的體驗(yàn)。你創(chuàng)建網(wǎng)站時(shí)關(guān)注通用的設(shè)計(jì)和可用性：確保使用老版本瀏覽器的人也可以使用網(wǎng)站，但是同時(shí)充分利用現(xiàn)代瀏覽器如Chrome和Opera的高級(jí)特性。

　　網(wǎng)站不需要在不同的瀏覽器下保持完全的像素級(jí)別的一模一樣。下面是一個(gè)使用漸進(jìn)增強(qiáng)的例子：Github的Plans Pricing頁(yè)面。

　　下圖是這個(gè)頁(yè)面在Google Chrome下的樣式. 注意按鈕和其它頁(yè)面元素使用了CSS3（text-shadow,gradient圖像值，box-shadow，border-radius等）：

　　在IE7下不支持CSS3屬性和值的瀏覽器頁(yè)面像這樣：

　　對(duì)于大多數(shù)網(wǎng)絡(luò)用戶來(lái)說(shuō)這點(diǎn)差別是很細(xì)微的。重要的是頁(yè)面功能一樣并且所有人都可以使用。

　　這個(gè)頁(yè)面只是利用了Chrome有而IE7沒(méi)有的特性。網(wǎng)頁(yè)設(shè)計(jì)者利用IE專有的filter CSS屬性來(lái)渲染顏色漸變，但是不嘗試使用CSS背景圖來(lái)渲染圓角，以及使用CSS/HTML標(biāo)簽技巧來(lái)模擬text-shadow。

　　漸近增強(qiáng)是當(dāng)前在你的網(wǎng)頁(yè)設(shè)計(jì)中使用CSS3的關(guān)鍵促成因素。

　　用網(wǎng)站數(shù)據(jù)做決定

　　網(wǎng)頁(yè)設(shè)計(jì)者應(yīng)該使用數(shù)據(jù)來(lái)做正確的決定。當(dāng)為客戶的網(wǎng)站工作時(shí)，獲取很好的關(guān)于他們目前用戶的數(shù)據(jù)總是很有用的。

　　Google Analytics (例如)是一個(gè)完全免費(fèi)的網(wǎng)站分析工具。只要在客戶的網(wǎng)站上運(yùn)行它一周時(shí)間就可以幫助你獲得非常重要的信息。網(wǎng)站分析可以告訴你用戶都使用什么瀏覽器訪問(wèn)了你的網(wǎng)站，在哪里訪問(wèn)，然后你就可知道可以處理CSS3的瀏覽器的比率。

　　如果你發(fā)現(xiàn)Chrome和Safari（都使用WebKit布局引擎）比例很高，你就可以很高興了，因?yàn)樗麄兛梢蕴幚砗芏郈SS3提供的特性。一個(gè)粗略的近似統(tǒng)計(jì)表明Safari和Chrome的瀏覽器市場(chǎng)占有率大約是7%和10%。這個(gè)數(shù)字可能根據(jù)網(wǎng)站和面向的用戶群可能會(huì)高很多和低很多。而對(duì)于這個(gè)數(shù)字，意味著五分之一的人可以體驗(yàn)CSS3。

在Mozilla Firefox（以及SeaMonkey和Flock等依賴Mozilla布局引擎的瀏覽器）下看那個(gè)頁(yè)面，投資星標(biāo)看起來(lái)更好。

　　然后，對(duì)于這個(gè)月發(fā)布的IE9，使用更多的CSS3要比不使用會(huì)更好。IE9不是完美的它沒(méi)有Chrome和Firefox處理CSS3和HTML5那么豐富的特性，但是它向正確的方向邁進(jìn)了一步。

　　在你自己的網(wǎng)站上學(xué)習(xí)和練習(xí)CSS3

　　作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師，你很可能會(huì)運(yùn)行自己的網(wǎng)站。使用CSS3和漸近增強(qiáng)來(lái)重構(gòu)你的網(wǎng)站，這讓你通過(guò)真實(shí)世界學(xué)習(xí)，練習(xí)獲取經(jīng)驗(yàn)。

　　在你自己的網(wǎng)站中使用CSS3也給你有機(jī)會(huì)展示你對(duì)新技術(shù)的渴求以獲得潛在的客戶。

　　許多前沿CSS3技術(shù)和試驗(yàn)都是從網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)者的作品網(wǎng)站中開(kāi)始的。這是一個(gè)多產(chǎn)的創(chuàng)新環(huán)境。

　　總結(jié)

　　通過(guò)查看網(wǎng)站統(tǒng)計(jì)數(shù)據(jù)，你可以對(duì)每個(gè)網(wǎng)站決定哪個(gè)CSS3特性你可以在網(wǎng)站中使用。利用漸近增強(qiáng)你可以現(xiàn)在就實(shí)用地使用CSS3，即使網(wǎng)絡(luò)用戶依然在使用不支持CSS3的瀏覽器。

　　我們基于這樣一個(gè)前提，就是允許對(duì)于不同的瀏覽器有不同的設(shè)計(jì)甚至這就是希望的結(jié)果。如果你還是在猶豫是否要在你的項(xiàng)目中使用CSS3，請(qǐng)不要猶豫了。擁抱CSS3。

it知識(shí)庫(kù)：擁抱并使用CSS3，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。