儘管CSS3的諸多新特性還不被許多瀏覽器支持,或者說支援的不好。但身為前端開發人員,你總不能等到所有瀏覽器都完美支援它的時候再去學習。
CSS3到底為我們帶來了哪些新特性呢?簡單的說,CSS3把很多以前需要使用圖片和腳本來實現的效果,只需要短短幾行程式碼就能搞定。例如圓角,圖片邊框,文字陰影和盒子陰影等。 CSS3不僅能簡化前端開發工作人員的設計流程,還能加快頁面載入速度。
本文裡面,就讓我們來全面的來看看CSS3的各種新功能。也別忘了檢閱我們之前發布的一些CSS教學和技巧文章:
為了使用大部分CSS3特性,我們不得不與原來的屬性一起使用生產商專有擴充。原因是直到現在,大部分瀏覽器只支援部分CSS3屬性。而且不幸的是,有些屬性甚至到最後都可能不被W3C推薦,所以透過指定瀏覽器專有屬性,將他們與標準屬性區分開來是很重要的(然後在他們是多餘的時候使用符合標準的樣式將之覆蓋)。
當然,這種方法的缺點是,將導致一個雜亂的樣式表和網站在瀏覽器之間的表現不一致。畢竟,我們不想在我們的樣式表中重拾私有瀏覽器hack的需求。 Internet Explorer的臭名昭著的marquee、blink以及其它標籤在大量樣式表中被應用,並在20世紀九十年代成為一個傳奇;它們依然讓現存的很多網站(在其他瀏覽器中)表現不一致甚至難以閱讀。而我們現在也不想將自己置於同樣的境地,對吧?
然而,網站不需要在所有的瀏覽器中看起來必須嚴格的一致性。有的時候在某個瀏覽器中使用私有屬性來實現特定的效果是可行的。
最常見的私有屬性是用於Webkit核心瀏覽器的(例如, Safari), 它們以-webkit-開始,以及Gecko核心的瀏覽器(例如, Firefox),以-moz-開始,還有Konqueror (-khtml -)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們自己的屬性擴充(目前只有IE8支援-ms-前綴)
作為專業的設計師,我們不得不注意:使用這些私有屬性將讓我們的樣式表無法通過驗證。所以目前將他們放到最終版的樣式中是少見的。但在某種情況下,例如試驗或學習,我們至少可以考慮將他們和標準的CSS屬性一起寫到一個樣式表中。
CSS選擇器是個難以置信地強大的工具:它們允許我們在標籤中指定特定的HTML元素而不必使用多餘的class、 ID 或JavaScripts。而且它們中的大部分並不是CSS3中新添加的,而是沒有被得到應有的廣泛應用。如果你在嘗試實現一個乾淨的、輕量級的標籤以及結構與表現更好的分離,高級選擇器是非常有用的。它們可以減少在標籤中的class和ID的數量並讓設計師更方便的維護樣式表。
三個新的屬性選擇器被加入到CSS3:
[att^="value"]
[att$="value"]
[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中唯一新引入的连字符是通用的兄弟选择器(同级)。它针对一个元素的有同一个父级节点的所有兄弟级别元素。
比如,给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点),在样式表中定义下面的样式就足够了:
div~img {
border: 1px solid #ccc;
}
浏览器支持:所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6 !
伪类
或许在CSS3中增加最多的就是新的伪类了,这里是一些最有趣和最有用的:
- :nth-child(n)
让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个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
匹配一个父节点下的最后一个子元素,等同于:nth-last-child(1) - :checked
匹配选择的元素,比如复选框 - :empty
匹配空元素(没有子元素)。 - :not(s)
匹配所有不符合指定声明(s)的元素。比如,如果你想让所有的没有使用”lead”类的段落的显示为黑色,可以这样写:
p:not([class*="lead"]) { color: black; }
Andrea Gandino在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落,并将其的外间距(margin)设置为0:
#primary .text p:last-child { margin: 0; }
浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类,Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled,但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。
伪元素
在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮(选中)的元素。
浏览器支持:目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。
扩展阅读