用 CSS 3 將你的設計帶入下個高度

睡蓮 — 2009-06-27T15:11:00+02:00

類別: 語言集
分頁標題: 用 CSS 3 將你的設計帶入下個高度 - 1
來源: (http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/)

譯文出處：前端觀察 - http://www.qianduan.net/take-your-design-to-the-next-level-with-css3.html

　　級聯樣式表在13年前被引入，而且被廣泛使用的CSS 2.1標準在11年前被創建，顯然我們現在已經與當年相差千里了。相當了不起的是期間網站開發有了多少進步 —— 事實上，我們也無法想像。

　　為什麼會這樣呢，當提到CSS的時候，過去我們是如此的不情願和害怕嘗試？為什麼我們還要使用討厭的hack和依賴JavaScript的技術來寫樣式？為什麼我們不能利用豐富的 CSS 3 特性和現代瀏覽器中可用的工具並將我們的設計品質帶到下一個等級？

　　是時候在我們的項目中引入 CSS 3 特性了，不用害怕逐漸在我們的樣式表中加入 css 3 特性和選擇器會出問題。讓我們的客戶意識到 CSS 3 的優勢 (而且讓舊瀏覽器更快的消失)是我們力所能及的事情——我們應該這樣做，特別是在它能夠讓網站更加靈活並減少開發和維護成本的時候。

　　在本文中，我們將研究 CSS 3 的優勢，並看一下一些網頁設計師是如何使用它們的。最後，我們將了解到從 CSS 3 中我們能得到什麼以及我們如何在我們的項目中使用它的新特性。

同時請參考我們之前的一篇相關文章：

　　‧使用CSS3將你的網站設計推向未來

使用瀏覽器專有屬性

　　為了使用大部分 CSS 3 特性，我們不得不與原來的屬性一起使用生產商專有擴展。原因是直到現在，大部分瀏覽器只支持部分 CSS 3 屬性。而且不幸的是，一些屬性甚至到最後都可能不被 W3C 推薦，所以通過指定瀏覽器專有屬性，將他們與標準屬性區分開來是很重要的(然後在他們是多餘的的時候使用符合標準的樣式將之覆蓋)。

　　當然，這種方法的劣勢是，將導致一個雜亂的樣式表和網站在瀏覽器之間的表現不一致。畢竟，我們不想在我們的樣式表中重拾私有瀏覽器 hack 的需求。 Internet Explorer 的臭名昭著的 marquee 、 blink 以及其它標籤在大量樣式表中被應用，並在 20 世紀九十年代成為一個傳奇；它們依然讓現存的很多網站（在其他瀏覽器中）表現不一致甚至難以閱讀。而我們現在也不想將我們自己置於同樣的境地，對吧？

　　然而，網站不需要在所有的瀏覽器中看起來必須嚴格的一致。有的時候在某個瀏覽器中使用私有屬性來實現特定的效果是可行的。

最常見的私有屬性是用於 Webkit 核心瀏覽器的(比如, Safari)，它們以-webkit-開始，以及Gecko核心的瀏覽器(比如, Firefox)，以-moz-開始，還有Konqueror ( -khtml- )、Opera ( -o- )以及Internet Explorer ( -ms- )都有它們自己的屬性擴展（目前只有IE8支持-ms-前綴）。

　　作為專業的設計師，我們不得不注意：使用這些私有屬性將讓我們的樣式表不能通過驗證。所以目前將他們放到最終版的樣式中是少見的。但是在某種情況下，比如試驗或學習，我們至少可以考慮將他們和標準的 CSS 屬性一起寫到一個樣式表中。

擴展閱讀

　　‧Vendor-specific extensions and W3C
　　‧Vendor-specific extensions to CSS3
　　‧Vendor-specific properties

1) 選擇器

　　CSS選擇器是個難以置信地強大的工具：它們允許我們在標籤中指定特定的 HTML 元素而不必使用多餘的 class、ID 或 JavaScripts。而且它們中的大部分並不是 CSS 3 中新添加的，而是沒有被得到應有的廣泛應用。如果你在嘗試實現一個乾淨的、輕量級的標籤以及結構與表現更好的分離，高級選擇器是非常有用的。它們可以減少在標籤中的class和ID的數量並讓設計師更方便的維護樣式表。

屬性選擇器

三個新的屬性選擇器被添加到CSS3：

　　‧[att^="value"]
　　　匹配包含以特定的值開頭的屬性的元素

　　‧[att$="value"]
　　　匹配包含以特定的值結尾的屬性的元素

　　‧[att*="value"]
　　　匹配包含含有特定的值的屬性的元素

tweetCC使用一個屬性選擇器來指定有title屬性並以字符“tweetCC”結尾的連接：

a[title$="tweetCC"]{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 140px;
    height: 140px;
    text-indent: -9999px;
    }

　　瀏覽器支持:只有 IE 6 不支持 CSS 的屬性選擇器。 IE 7 和 IE 8、Opera、Webkit 核心和 Gecko 核心的瀏覽器都支持。所以在你的樣式中使用屬性選擇器是比較安全的。

連字符

　　CSS 3 中唯一新引入的連字符是通用的兄弟選擇器（同級）。它針對一個元素的有同一個父級節點的所有兄弟級別元素。

　　比如，給某個特定的 div 的同級的圖片添加一個灰色的邊框( div 和圖片應該有同一個父級節點 )，在樣式表中定義下面的樣式就足夠了：

div~img {
	border: 1px solid #ccc;
	}

　　瀏覽器支持：所有的主要瀏覽器都支持這個通用的兄弟選擇器除了我們最愛的 IE 6 ！

偽類

或許在 CSS 3 中增加最多的就是新的偽類了，這裡是一些最有趣和最有用的：

: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 瀏覽器支持所有新的 CSS 3 偽類，Firefox 2 和 3 (Gecko 核心)只支持:not(s) , :last-child , :only-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是 Firefox 3.5 將更加廣泛的支持 CSS 3 選擇器。 Trident 核心瀏覽器(Internet Explorer)事實上不支持這些偽選擇器。

偽元素

　　在 CSS 3 中唯一引入的偽元素是 ::selection ，它可以讓你指定被用戶高亮（選中）的元素。

　　瀏覽器支持:目前沒有任何一款 Internet Explorer 或 Firefox 瀏覽器支持 ::selection 偽元素。 Safari、Opera 和 Chrome 均支持。

擴展閱讀

　　‧Selectors Level 3: W3C Working Draft
　　‧CSS3: Attribute selectors: CSS3.info
　　‧Compatibility table: CSS3 Selectors
　　‧CSS selectors and pseudo selectors browser compatibility
　　‧CSS3 Attribute Selectors
　　‧::selection
　　‧General Sibling Selector
　　‧CSS3 Pseudo-classes

2)RGBA和透明度

　　RGBA 讓你可以不僅僅設定色彩，還能設定元素的透明度。一些瀏覽器尚不支持它，所以最好在 RGBa 前面設定其它瀏覽器支持的沒有透明的顏色屬性。

Tim Van Damme 在連接的 hover 效果上使用了 RGBA

在這個網站上， Tim Van Damme在鼠標懸停效果上使用了 RGBa；例如，在他的首頁的 network 連接上:

  #networks li a :hover , 
  #networks li a :focus { 
      background : rgba ( 164 , 173 , 183 , .15 ) ; 
      }

　　當設定一個 RGBA 色彩的時候，我們必須依次設定紅、藍、和綠色的值，可以是 0-255 或百分數。透明值應該在 0.0 到 1.0 之間，例如 0.5 代表 50% 的透明度。

　　RGBA 和 opacity 之間的不同是前者只會應用到指定的元素上，而後者會影響我們指定的元素及其子元素。

　　這裡有個例子展示我們如何給一個 div 添加 80% 透明:

 div { 
	  opacity : 0.8 ; 
	  }

　　瀏覽器支持: RGBA 被 Webkit 內核瀏覽器支持。IE 所有版本都不支持。Firefox 2 也不支持，但是 Firefox 3 和 Opera 9.5 均支持。 Opacity 被 Opera、Webkit 核心和 Gecko 核心的瀏覽器支持。 IE 所有版本同樣不支持。 IE 只支持自家的該死的濾鏡（filter）

擴展閱讀：

　　‧CSS3系列教程:RGBA
　　‧CSS3之旅:RGBa顏色
　　‧RGBa色彩的瀏覽器支持
　　‧CSS Color Module Level 3: W3C Working Draft
　　‧RGBA colors: CSS3.info
　　‧RGBA color space
　　‧Is CSS3 RGBa ready to rock?
　　‧Super-Awesome Buttons with CSS3 and RGBA

睡蓮‧池水間 :: 文章

用 CSS 3 將你的設計帶入下個高度