|
|
級聯樣式表在13年前被引入，而且被廣泛使用的CSS 2.1標準在11年前被創建，顯然我們現在已經與當年相差千里了。相當了不起的是期間網站開發有了多少進步——事實上，我們也無法想象。
為什么會這樣呢，當提到CSS的時候，過去我們是如此的不情愿和害怕嘗試？為什么我們還要使用討厭的hack和依賴JavaScript的技術來寫樣式？為什么我們不能利用豐富的CSS3 特性和現代瀏覽器中可用的工具 并將我們的設計品質帶到下一個等級？
是時候在我們的項目中引入CSS3 特性了，不用害怕逐漸在我們的樣式表中加入css3特性和選擇器會出問題。讓我們的客戶意識到CSS3的優勢 (而且讓舊瀏覽器更快的消失)是我們力所能及的事情——我們應該這樣做，特別是在它能夠讓網站更加靈活并減少開發和維護成本的時候。
使用瀏覽器專有屬性
為了使用大部分CSS3特性，我們不得不與原來的屬性一起使用生產商專有擴展。原因是直到現在，大部分瀏覽器只支持部分CSS3屬性。而且不幸的是，一些屬性甚至到最后都可能不被W3C推薦，所以通過指定瀏覽器專有屬性，將他們與標準屬性區分開來是很重要的(然后在他們是多余的的時候使用符合標準的樣式將之覆蓋)。
當然，這種方法的劣勢是，將導致一個雜亂的樣式表和網站在瀏覽器之間的表現不一致。畢竟，我們不想在我們的樣式表中重拾私有瀏覽器hack的需求。InterNETExplorer的臭名昭著的marquee、blink以及其它標簽在大量樣式表中被應用，并在20世紀九十年代成為一個傳奇；它們依然讓現存的很多網站（在其他瀏覽器中）表現不一致甚至難以閱讀。而我們現在也不想將我們自己置于同樣的境地，對吧？
然而，網站不需要在所有的瀏覽器中看起來必須嚴格的一致。有的時候在某個瀏覽器中使用私有屬性來實現特定的效果是可行的。
最常見的私有屬性是用于Webkit核心瀏覽器的(比如, Safari)，它們以-webkit-開始，以及Gecko核心的瀏覽器(比如, Firefox)，以-moz-開始，還有Konqueror(-khtml-)、Opera (-o-) 以及InterNET Explorer(-ms-)都有它們自己的屬性擴展（目前只有IE8支持-ms-前綴）
作為專業的設計師，我們不得不注意：使用這些私有屬性將讓我們的樣式表不能通過驗證。所以目前將他們放到最終版的樣式中是少見的。但是在某種情況下，比如試驗或學習，我們至少可以考慮將他們和標準的CSS屬性一起寫到一個樣式表中。
1. 選擇器
CSS選擇器是個難以置信地強大的工具：它們允許我們在標簽中指定特定的HTML元素而不必使用多余的class、 ID或JavaScripts。而且它們中的大部分并不是CSS3中新添加的，而是沒有被得到應有的廣泛應用。如果你在嘗試實現一個干凈的、輕量級的標簽以及結構與表現更好的分離，高級選擇器是非常有用的。它們可以減少在標簽中的class和ID的數量并讓設計師更方便的維護樣式表。
屬性選擇器
三個新的屬性選擇器被添加到CSS3：
◆de>[att^="value"]de>
匹配包含以特定的值開頭的屬性的元素
◆de>[att$="value"]de>
匹配包含以特定的值結尾的屬性的元素
◆de>[att*="value"]de>
匹配包含含有特定的值的屬性的元素
值的屬性的元素
tweetCC使用一個屬性選擇器來指定有title屬性并以字符“tweetCC”結尾的鏈接:
1. a[title$="tweetCC"] {
2. position: absolute;
3. top: 0;
4. right: 0;
5. display: block;
6. width: 140px;
7. height: 140px;
8. text-indent: -9999px;
9. }
it知識庫：用CSS 3將你的設計水平帶入下個高度，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
