|
網(wǎng)頁設(shè)計是變化非常快的行業(yè)。在過去一兩年,CSS3潛在地將網(wǎng)頁設(shè)計帶入了一個新的級別。這不僅僅是因為這個最新版本的CSS有很多新的功能特性,更重要的是因為CSS3使得原來需要更多工作,更多技術(shù)以及更多軟件才能做到的事情變得更加簡單。例如,基本的動畫和動態(tài)圖片功能(如顏色漸變)原來只能通過JavaScript和Flash來實現(xiàn),并且圖片需要像Photoshop等的來編輯。現(xiàn)在不再需要了。
CSS3有許多需要學(xué)習(xí)的東西,如果你希望讓自己追上你身邊發(fā)生的事情可能會很崩潰。讓我們來看一下CSS3雖然不是所有流瀏覽器都支持(比如IE6)是如何可以實用地運用到你的建站過程。
漸近增強(qiáng)
漸近增強(qiáng)是當(dāng)我們處于過渡期的重要概念,這個時期中,并不是所有用戶的瀏覽器都支持CSS3特性。漸近增強(qiáng)簡單地說就是我們可以為有更多功能的瀏覽器提供比使用非現(xiàn)代瀏覽器更強(qiáng)大的體驗。你創(chuàng)建網(wǎng)站時關(guān)注通用的設(shè)計和可用性:確保使用老版本瀏覽器的人也可以使用網(wǎng)站,但是同時充分利用現(xiàn)代瀏覽器如Chrome和Opera的高級特性。
網(wǎng)站不需要在不同的瀏覽器下保持完全的像素級別的一模一樣。下面是一個使用漸進(jìn)增強(qiáng)的例子:Github的Plans Pricing頁面。
下圖是這個頁面在Google Chrome下的樣式. 注意按鈕和其它頁面元素使用了CSS3(text-shadow,gradient圖像值,box-shadow,border-radius等):
在IE7下不支持CSS3屬性和值的瀏覽器頁面像這樣:
對于大多數(shù)網(wǎng)絡(luò)用戶來說這點差別是很細(xì)微的。重要的是頁面功能一樣并且所有人都可以使用。
這個頁面只是利用了Chrome有而IE7沒有的特性。網(wǎng)頁設(shè)計者利用IE專有的filter CSS屬性來渲染顏色漸變,但是不嘗試使用CSS背景圖來渲染圓角,以及使用CSS/HTML標(biāo)簽技巧來模擬text-shadow。
漸近增強(qiáng)是當(dāng)前在你的網(wǎng)頁設(shè)計中使用CSS3的關(guān)鍵促成因素。
用網(wǎng)站數(shù)據(jù)做決定
網(wǎng)頁設(shè)計者應(yīng)該使用數(shù)據(jù)來做正確的決定。當(dāng)為客戶的網(wǎng)站工作時,獲取很好的關(guān)于他們目前用戶的數(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布局引擎的瀏覽器)下看那個頁面,投資星標(biāo)看起來更好。
然后,對于這個月發(fā)布的IE9,使用更多的CSS3要比不使用會更好。IE9不是完美的它沒有Chrome和Firefox處理CSS3和HTML5那么豐富的特性,但是它向正確的方向邁進(jìn)了一步。
在你自己的網(wǎng)站上學(xué)習(xí)和練習(xí)CSS3
作為一個網(wǎng)頁設(shè)計師,你很可能會運行自己的網(wǎng)站。使用CSS3和漸近增強(qiáng)來重構(gòu)你的網(wǎng)站,這讓你通過真實世界學(xué)習(xí),練習(xí)獲取經(jīng)驗。
在你自己的網(wǎng)站中使用CSS3也給你有機(jī)會展示你對新技術(shù)的渴求以獲得潛在的客戶。
許多前沿CSS3技術(shù)和試驗都是從網(wǎng)頁設(shè)計師和開發(fā)者的作品網(wǎng)站中開始的。這是一個多產(chǎn)的創(chuàng)新環(huán)境。
總結(jié)
通過查看網(wǎng)站統(tǒng)計數(shù)據(jù),你可以對每個網(wǎng)站決定哪個CSS3特性你可以在網(wǎng)站中使用。利用漸近增強(qiáng)你可以現(xiàn)在就實用地使用CSS3,即使網(wǎng)絡(luò)用戶依然在使用不支持CSS3的瀏覽器。
我們基于這樣一個前提,就是允許對于不同的瀏覽器有不同的設(shè)計甚至這就是希望的結(jié)果。如果你還是在猶豫是否要在你的項目中使用CSS3,請不要猶豫了。擁抱CSS3。
it知識庫:擁抱并使用CSS3,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。