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

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

　　漸近增強(qiáng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　總結(jié)

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

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

it知識庫：擁抱并使用CSS3，轉(zhuǎn)載需保留來源！

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