擁抱并使用CSS3

來源: RockUX  發布時間: 2011-03-30 13:41  閱讀: 1194 次  推薦: 0   原文鏈接   [收藏]  
摘要:CSS3有許多需要學習的東西,如果你希望讓自己追上你身邊發生的事情可能會很崩潰。讓我們來看一下CSS3——雖然不是所有流瀏覽器都支持(比如IE6)——是如何可以實用地運用到你的建站過程。

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

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

  漸近增強

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

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

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

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

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

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

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

  用網站數據做決定

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

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

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

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

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

  在你自己的網站上學習和練習CSS3

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

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

  許多前沿CSS3技術和試驗都是從網頁設計師和開發者的作品網站中開始的。這是一個多產的創新環境。

  總結

  通過查看網站統計數據,你可以對每個網站決定哪個CSS3特性你可以在網站中使用。利用漸近增強你可以現在就實用地使用CSS3,即使網絡用戶依然在使用不支持CSS3的瀏覽器。

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

0
0
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()