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

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

　　漸近增強

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

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

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

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

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

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

　　漸近增強是當前在你的網(wǎng)頁設計中使用CSS3的關鍵促成因素。

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

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

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

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

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

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

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

　　作為一個網(wǎng)頁設計師，你很可能會運行自己的網(wǎng)站。使用CSS3和漸近增強來重構你的網(wǎng)站，這讓你通過真實世界學習，練習獲取經(jīng)驗。

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

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

　　總結(jié)

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

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

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

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