盡管CSS3的諸多新特性還不被很多瀏覽器支持,或者說支持的不好。但作為一個前端開發(fā)人員,你總不能等到所有瀏覽器都完美支持它的時候再去學習。
CSS3到底給我們帶來了哪些新特性呢?簡單的說,CSS3把很多以前需要使用圖片和腳本來實現(xiàn)的效果,只需要短短幾行代碼就能搞定。比如圓角,圖片邊框,文字陰影和盒陰影等。CSS3不僅能簡化前端開發(fā)工作人員的設計過程,還能加快頁面載入速度。
本文里面,就讓我們來全面的看一下CSS3的各種新特性。也別忘了檢閱我們之前發(fā)布的一些CSS教程和技巧文章:
使用瀏覽器專有屬性
為了使用大部分CSS3特性,我們不得不與原來的屬性一起使用生產(chǎn)商專有擴展。原因是直到現(xiàn)在,大部分瀏覽器只支持部分CSS3屬性。而且不幸的是,一些屬性甚至到最后都可能不被W3C推薦,所以通過指定瀏覽器專有屬性,將他們與標準屬性區(qū)分開來是很重要的(然后在他們是多余的的時候使用符合標準的樣式將之覆蓋)。
當然,這種方法的劣勢是,將導致一個雜亂的樣式表和網(wǎng)站在瀏覽器之間的表現(xiàn)不一致。畢竟,我們不想在我們的樣式表中重拾私有瀏覽器hack的需求。 Internet Explorer的臭名昭著的marquee、blink以及其它標簽在大量樣式表中被應用,并在20世紀九十年代成為一個傳奇;它們依然讓現(xiàn)存的很多網(wǎng) 站(在其他瀏覽器中)表現(xiàn)不一致甚至難以閱讀。而我們現(xiàn)在也不想將我們自己置于同樣的境地,對吧?
然而,網(wǎng)站不需要在所有的瀏覽器中看起來必須嚴格的一致。有的時候在某個瀏覽器中使用私有屬性來實現(xiàn)特定的效果是可行的。
最常見的私有屬性是用于Webkit核心瀏覽器的(比如, Safari), 它們以-webkit-開始,以及Gecko核心的瀏覽器(比如, Firefox),以-moz-開始,還有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們自己的屬性擴展(目前只有IE8支持-ms-前綴)
作為專業(yè)的設計師,我們不得不注意:使用這些私有屬性將讓我們的樣式表不能通過驗證。所以目前將他們放到最終版的樣式中是少見的。但是在某種情況下,比如試驗或?qū)W習,我們至少可以考慮將他們和標準的CSS屬性一起寫到一個樣式表中。
擴展閱讀
1. 選擇器
CSS選擇器是個難以置信地強大的工具:它們允許我們在標簽中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它們中的大部分并不是CSS3中新添加的,而是沒有被得到應有的廣泛應用。如果你在嘗試實現(xiàn)一個干凈的、輕量級的標簽以及 結(jié)構(gòu)與表現(xiàn)更好的分離,高級選擇器是非常有用的。它們可以減少在標簽中的class和ID的數(shù)量并讓設計師更方便的維護樣式表。
屬性選擇器
三個新的屬性選擇器被添加到CSS3:
[att^="value"] 匹配包含以特定的值開頭的屬性的元素
[att$="value"] 匹配包含以特定的值結(jié)尾的屬性的元素
[att*="value"] 匹配包含含有特定的值的屬性的元素
值的屬性的元素
a[title$="tweetCC"] { position: absolute; top: 0; right: 0; display: block; width: 140px; height: 140px; text-indent: -9999px; }
瀏覽器支持:只有IE6不支持CSS的屬性選擇器。IE7和IE8、Opera、Webkit核心和Gecko核心的瀏覽器都支持。所以在你的樣式中使用屬性選擇器是比較安全的。
連字符
CSS3中唯一新引入的連字符是通用的兄弟選擇器(同級)。它針對一個元素的有同一個父級節(jié)點的所有兄弟級別元素。
比如,給某個特定的div的同級的圖片添加一個灰色的邊框(div和圖片應該有同一個父級節(jié)點),在樣式表中定義下面的樣式就足夠了:
div~img { border: 1px solid #ccc; }
瀏覽器支持:所有的主要瀏覽器都支持這個通用的兄弟選擇器除了我們最愛的IE6!
偽類
或許在CSS3中增加最多的就是新的偽類了,這里是一些最有趣和最有用的:
- :nth-child(n)
讓你基于元素在父節(jié)點的子元素的列表位置來指定元素。你可以是用數(shù)字、數(shù)字表達式或odd 和even 關(guān)鍵詞(對斑馬樣式的列表很完美)。所以如果你想匹配在第四個元素之后的一個3個元素的分組,你可以簡單的這樣使用:
:nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...個元素*/
- :nth-last-child(n)
與上個選擇器的思想同樣,但是從后面匹配元素(倒序),比如,為了指定一個div里面的最后兩個段落,我們可以使用下面的選擇器:
div p:nth-last-child(-n+2)
:last-child 匹配一個父節(jié)點下的最后一個子元素,等同于:nth-last-child(1)
- :checked
匹配選擇的元素,比如復選框
- :empty
匹配空元素(沒有子元素)。
- :not(s)
匹配所有不符合指定聲明(s)的元素。比如,如果你想讓所有的沒有使用”lead”類的段落的顯示為黑色,可以這樣寫:
p:not([class*="lead"]) { color: black; }
Andrea Gandino 在他的網(wǎng)站上使用:last-child 為選擇器指定每篇日志的最后一個段落,并將其的外間距(margin)設置為0:
#primary .text p:last-child { margin: 0; }
瀏覽器支持: Webkit核心和Opera 瀏覽器支持所有新的CSS3 偽類,F(xiàn)irefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled,但是Firefox 3.5 將更加廣泛的支持CSS3 選擇器。Trident核心瀏覽器(Internet Explorer)事實上不支持這些偽選擇器。
偽元素
在CSS3中唯一引入的偽元素是::selection.它可以讓你指定被用戶高亮(選中)的元素。
瀏覽器支持: 目前沒有任何一款I(lǐng)nternet Explorer 或Firefox 瀏覽器支持::selection 偽元素。Safari, Opera 和Chrome 均支持。
擴展閱讀
出處:藍色理想
責任編輯:bluehearts
上一頁 下一頁 RGBA和透明度
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|