CSS3
CSS3對于我們Web開發(fā)者來說不只是新奇的技術(shù)，更重要的是這些全新概念的web應(yīng)用給我們帶來更多無限的可能性，也極大地提高了我們的開發(fā)效率。我們將不必再依賴圖片或者Javascript 去完成圓角、多背景、用戶自定義字體、3D動畫、漸變、盒陰影、文字陰影、透明度等提高Web設(shè)計質(zhì)量的特色應(yīng)用。
CSS3在選擇器上面的支持
利用屬性選擇器我們可以根據(jù)屬性值的開頭或結(jié)尾很容易選擇某個元素，利用兄弟選擇器可以選擇同級兄弟結(jié)點(diǎn)或緊鄰下一個結(jié)點(diǎn)的元素，利用偽類選擇器可以選擇某一類元素，CSS3在選擇器上的豐富支持讓我們可以靈活的控制樣式，而不必為了選擇某些元素給他們加上如”odd”或”even”這樣的類名。
CSS3在樣式上的支持
有一個調(diào)查說開發(fā)者最期待CSS3的特性是什么，最后票數(shù)最多的是“圓角”，不錯，圓角這個功能可以給我們這些前端工程師省去很多時間和精力去切圖拼湊一個圓角。CSS3還支持陰影，盒陰影以及文本陰影，漸變，之前你可能是通過IE的濾鏡看到過，其實(shí)CSS3實(shí)現(xiàn)起來更加方便。@font-face可以自定義字體，如果用傳統(tǒng)的方式，VD把一個帶有特殊文字的設(shè)計圖給你讓你來實(shí)現(xiàn)的話你可能會把它做成一個圖片，而通過CSS3用@font-face就可以了。CSS3對于連續(xù)文本換行也新增了一個屬性word-wrap,你可以設(shè)置其為normal(不換行)或break-word(換行)，這解決了連續(xù)英文字符出現(xiàn)頁面錯位的問題，也不需要后端去截取這個連續(xù)字符。使用CSS3你還可以給邊框加背景，這在iphone上也有應(yīng)用的例子。CSS3在背景上支持背景調(diào)整大小，如當(dāng)你用一張大圖要做一個小的元素背景時可以通過background-size來調(diào)整背景圖的大小來適應(yīng)這個元素。CSS3支持opacity, rgba和hsl/a, opacity和rgba的區(qū)別是opacity設(shè)置的透明對其內(nèi)容也會產(chǎn)生影響，而rgba只對你應(yīng)用的元素產(chǎn)生影響。CSS3在布局上對于盒模型提供了支持，可以設(shè)置box-sizing為content-box或border-box，應(yīng)用為content-box就是正常的模式，而應(yīng)用為border-box和IE5.5的盒模型很相似，即元素的寬度包括border和padding，這個在布局上可能會比較方便，不用去管到底這個元素會占用多大的寬度，而用content-box還需要手動計算一下這個元素實(shí)際占用的寬度。
CSS3對于動畫的支持
CSS3支持的動畫類型有：transform(變換)、transition(過渡)和animation(動畫)。你可以對特定的屬性設(shè)置transition，transiton和animation的區(qū)別不大，animation的動畫是自己定義的，面向的更多的是腳本開發(fā)者，往往更加復(fù)雜。
為了使用大部分CSS3特性，我們不得不與原來的屬性一起使用生產(chǎn)商專有擴(kuò)展。原因是直到現(xiàn)在，大部分瀏覽器只支持部分CSS3屬性。最常見的私有屬性是用于Webkit核心瀏覽器的(比如, Safari)， 它們以-webkit-開始，以及Gecko核心的瀏覽器(比如, Firefox)，以-moz-開始，還有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們自己的屬性擴(kuò)展（目前只有IE8支持-ms-前綴）
那我們在開發(fā)中該如何去用CSS3呢？
我覺得首先是遵循一個優(yōu)雅降級的原則，比如前面談到的圓角，我們可以針對Firefox和Safari等這些支持圓角的瀏覽器中應(yīng)用CSS圓角，而那些不支持CSS圓角的瀏覽器則顯示為直角。其次就是對于不支持CSS3的瀏覽器可以使用Javascript來實(shí)現(xiàn)，如CSS3任何元素支持:hover偽類，我們就可以對只支持鏈接:hover的IE6用JS來實(shí)現(xiàn)。最后就是在向用戶或老板推廣新技術(shù)的同時也要關(guān)注他們的目標(biāo)與可行性，不能為了技術(shù)而技術(shù)。
點(diǎn)擊查看CSS3 DEMO，需要Firefox3.5+/Safari4.0+
原文：http://ued.taobao.com/blog/2009/12/17/html5_css3/
本文鏈接：http://m.95time.cn/tech/web/2009/7283.asp 
出處：Taobao.com UED Team
責(zé)任編輯：bluehearts
上一頁 揭秘HTML5和CSS3 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 揭秘HTML5和CSS3 [2]
