簡述網(wǎng)頁設(shè)計(jì)師怎么使用好CSS3技術(shù)

前些日子在SmashingMagazine看到一篇關(guān)于CSS3新技術(shù)不錯(cuò)的文章，它詳細(xì)介紹了CSS3的新特性和它的使用方法，它包括:瀏覽器專有屬性、選擇器(屬性選擇器、連字符、偽類、偽元素)、RGBA和透明度屬性、多欄布局、多背景圖、Word Wrap、文字陰影、CSS圓角、邊框圖片、盒陰影、盒尺寸、媒體查詢、語音，并詳細(xì)說明了每個(gè)新技術(shù)目前有哪些瀏覽器兼容。腳本之家本想將本文翻譯成中文版和大家分享，但發(fā)現(xiàn)已有國人完成翻譯，所以就偷個(gè)小懶，轉(zhuǎn)載一下人家的翻譯，在此感謝前端觀察的博主辛苦翻譯本文，為大家貢獻(xiàn)了如此珍貴的學(xué)習(xí)資料。

如果你熱愛前端開發(fā)，你對CSS感興趣，那么你肯定不可錯(cuò)過這篇文章。

級聯(lián)樣式表在13年前被引入，而且被廣泛使用的CSS 2.1 標(biāo)準(zhǔn)在11年前被創(chuàng)建，顯然我們現(xiàn)在已經(jīng)與當(dāng)年相差千里了。相當(dāng)了不起的是期間網(wǎng)站開發(fā)有了多少進(jìn)步——事實(shí)上，我們也無法想象。

為什么會這樣呢，當(dāng)提到CSS的時(shí)候，過去我們是如此的不情愿和害怕嘗試？為什么我們還要使用討厭的hack和依賴JavaScript的技術(shù)來寫樣式？為什么我們不能利用豐富的CSS3 特性和現(xiàn)代瀏覽器中可用的工具 并將我們的設(shè)計(jì)品質(zhì)帶到下一個(gè)等級？

是時(shí)候在我們的項(xiàng)目中引入CSS3 特性了，不用害怕逐漸在我們的樣式表中加入css3特性和選擇器會出問題。讓我們的客戶意識到CSS3的優(yōu)勢 (而且讓舊瀏覽器更快的消失)是我們力所能及的事情——我們應(yīng)該這樣做，特別是在它能夠讓網(wǎng)站更加靈活并減少開發(fā)和維護(hù)成本的時(shí)候。

在本文中，我們將研究CSS3的優(yōu)勢，并看一下一些網(wǎng)頁設(shè)計(jì)師是如何使用它們的。最后，我們將了解到從CSS3中我們能得到什么以及我們?nèi)绾卧谖覀兊捻?xiàng)目中使用它的新特性。

使用瀏覽器專有屬性

為了使用大部分CSS3特性，我們不得不與原來的屬性一起使用生產(chǎn)商專有擴(kuò)展。原因是直到現(xiàn)在，大部分瀏覽器只支持部分CSS3屬性。而且不幸的是，一些屬性甚至到最后都可能不被W3C推薦，所以通過指定瀏覽器專有屬性，將他們與標(biāo)準(zhǔn)屬性區(qū)分開來是很重要的(然后在他們是多余的的時(shí)候使用符合標(biāo)準(zhǔn)的樣式將之覆蓋)。

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

然而，網(wǎng)站不需要在所有的瀏覽器中看起來必須嚴(yán)格的一致。有的時(shí)候在某個(gè)瀏覽器中使用私有屬性來實(shí)現(xiàn)特定的效果是可行的。

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

作為專業(yè)的設(shè)計(jì)師，我們不得不注意：使用這些私有屬性將讓我們的樣式表不能通過驗(yàn)證。所以目前將他們放到最終版的樣式中是少見的。但是在某種情況下，比如試驗(yàn)或?qū)W習(xí)，我們至少可以考慮將他們和標(biāo)準(zhǔn)的CSS屬性一起寫到一個(gè)樣式表中。

擴(kuò)展閱讀

1. 選擇器

CSS選擇器是個(gè)難以置信地強(qiáng)大的工具：它們允許我們在標(biāo)簽中指定特定的HTML元素而不必使用多余的class、 ID 或JavaScripts。而且它們中的大部分并不是CSS3中新添加的，而是沒有被得到應(yīng)有的廣泛應(yīng)用。如果你在嘗試實(shí)現(xiàn)一個(gè)干凈的、輕量級的標(biāo)簽以及 結(jié)構(gòu)與表現(xiàn)更好的分離，高級選擇器是非常有用的。它們可以減少在標(biāo)簽中的class和ID的數(shù)量并讓設(shè)計(jì)師更方便的維護(hù)樣式表。

屬性選擇器

三個(gè)新的屬性選擇器被添加到CSS3：

值的屬性的元素

tweetCC 使用一個(gè)屬性選擇器來指定有title屬性并以字符“tweetCC”結(jié)尾的鏈接:

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

連字符

CSS3中唯一新引入的連字符是通用的兄弟選擇器（同級）。它針對一個(gè)元素的有同一個(gè)父級節(jié)點(diǎn)的所有兄弟級別元素。

比如，給某個(gè)特定的p的同級的圖片添加一個(gè)灰色的邊框(p和圖片應(yīng)該有同一個(gè)父級節(jié)點(diǎn))，在樣式表中定義下面的樣式就足夠了：

瀏覽器支持：所有的主要瀏覽器都支持這個(gè)通用的兄弟選擇器除了我們最愛的IE6！

偽類

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

:nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...個(gè)元素*/

p p:nth-last-child(-n+2)

Andrea Gandino 在他的網(wǎng)站上使用:last-child 為選擇器指定每篇日志的最后一個(gè)段落，并將其的外間距(margin)設(shè)置為0:

瀏覽器支持: Webkit核心和Opera 瀏覽器支持所有新的CSS3 偽類，F(xiàn)irefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, :o nly-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是Firefox 3.5 將更加廣泛的支持CSS3 選擇器。Trident核心瀏覽器(Internet Explorer)事實(shí)上不支持這些偽選擇器。

偽元素

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

瀏覽器支持: 目前沒有任何一款I(lǐng)nternet Explorer 或Firefox 瀏覽器支持::selection 偽元素。Safari, Opera 和Chrome 均支持。

擴(kuò)展閱讀

2. RGBA和透明度

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

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

在這個(gè)網(wǎng)站上，Tim Van Damme在鼠標(biāo)懸停效果上使用了RGBa；例如，在他的首頁的network鏈接上:

當(dāng)設(shè)定一個(gè)RGBA 色彩的時(shí)候，我們必須依次設(shè)定紅、藍(lán)、和綠色的值，可以是0-255或百分?jǐn)?shù)。透明值應(yīng)該在0.0到1.0之間，例如0.5 代表50% 的透明度。

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

這里有個(gè)例子展示我們?nèi)绾谓o一個(gè)p添加80% 透明:

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

擴(kuò)展閱讀：

3. 多欄布局

這是新的CSS3 選擇器可以讓你不用使用多個(gè)p標(biāo)簽就能實(shí)現(xiàn)多欄布局。瀏覽器解釋這個(gè)屬性并生成多欄，讓文本實(shí)現(xiàn)一個(gè)仿報(bào)紙的多欄結(jié)構(gòu)。

tweetCC 在其首頁使用了CSS3 多欄選擇器

tweetCC 在其首頁上將介紹文字顯示為四欄。這四欄并非浮動的p；相反，設(shè)計(jì)師使用下面的CSS3 多欄布局：

我們可以通過這個(gè)選擇器定義三件事情：欄數(shù)(column-coun)、欄寬(column-width、例子中沒有用到)和各欄之間的空白/間距(column-gap)。 如果column-count未設(shè)定，瀏覽器會在允許的寬度內(nèi)容納盡可能多的欄目。

為了在各欄時(shí)間添加一個(gè)數(shù)值的分隔，我們可以使用column-rule 屬性，其功能和border 屬性類似:

上面的這條屬性，瀏覽器中不會看到任何效果，因?yàn)樗鼪]有分欄，如果配合上面的例子就可以了。

相關(guān)屬性: column-break-after, column-break-before, column-span, column-fill.

瀏覽器支持: 多欄布局目前被Safari 3+，chrome，和Firefox 1.5+所支持。

擴(kuò)展閱讀：

4. 多背景圖

CSS3 允許你使用多個(gè)屬性比如background-image、background-repeat, background-size, background-position, background-originand background-clip等在一個(gè)元素上添加多層背景圖片.

在一個(gè)元素上添加多背景的最簡單的方法是使用簡寫代碼，你可以指定上面的所有屬性到一條聲明中，只是最常用的還是image, position 和repeat:

第一個(gè)圖片將是離用戶“最近”的那個(gè)。

該屬性的一個(gè)更復(fù)雜的版本可以是這樣的：

在這里，(100% 2em) 是background-size 的值；第一個(gè)背景圖片將會出現(xiàn)在左上角并會被拉伸至該p的100%寬度和2em的高度。

因?yàn)橹挥猩贁?shù)的瀏覽器支持它，又因?yàn)樵诰W(wǎng)站上不顯示背景有損網(wǎng)站的視覺效果，所以，這并不是一個(gè)被廣泛應(yīng)用了的屬性。盡管如此，它顯然能夠大大地提高設(shè)計(jì)師的工作流并顯著減少標(biāo)簽數(shù)量——相對于用其它方式實(shí)現(xiàn)同樣的效果。

瀏覽器支持: 目前，多背景圖片只在Safari/chrome 和Konqueror中有效

擴(kuò)展閱讀：

5. Word Wrap

word-wrap 屬性用來防止太長的字符串溢出的。可以用兩個(gè)屬性值normal 和break-word。normal 值(默認(rèn)的) 只在允許的斷點(diǎn)截?cái)辔淖郑邕B字符。如果使用了break-word ，文字可以在任何需要的地方截?cái)嘁云ヅ浞峙涞目臻g并防止溢出。

WordPress 后臺在數(shù)據(jù)表中使用了word-wrap.

在WordPress 的控制面板中，word-wrap 屬性被用于表格中的元素；比如在日志和頁面的列表中：

瀏覽器支持： word-wrap 被Internet Explorer 和Safari/chrome支持。Firefox 將在3.5版本中支持它。

擴(kuò)展閱讀：

6. 文字陰影

盡管在CSS2中就已經(jīng)存在，text-shadow是一個(gè)未被廣泛應(yīng)用的CSS屬性。但是它將在CSS3中被廣泛采用。這個(gè)屬性給設(shè)計(jì)師一個(gè)新的跨瀏覽器的工具來為設(shè)計(jì)添加一個(gè)維度以使文字醒目。

盡管這樣，你需要確認(rèn)，你的設(shè)計(jì)中的文字是可讀的，以防用戶的瀏覽器不支持CSS3高級屬性。給文字和背景色彩足夠的對比度以防text-shadow 屬性不能被瀏覽器正確渲染或理解。

Beakapp 在它的網(wǎng)站中使用了text-shadow 屬性：內(nèi)容區(qū)域.

BeakApp.com 為內(nèi)容區(qū)域使用了text-shadow 屬性，為文字添加深度和維度 并讓它變得醒目——而不是使用某種圖片替換技術(shù)。該屬性目前只在Safari和Chrome中可用。

該網(wǎng)站的主菜單使用的CSS如下：

這里我們使用陰影顏色(使用了RGBA，前面有描述)， 然后是右(x 坐標(biāo)) 和底部(y 坐標(biāo)) 偏移，最后是模糊半徑

如果要在一個(gè)文字上使用多陰影，可以使用逗號分開。比如：

瀏覽器支持: Webkit核心瀏覽器和Opera 9.5 支持text-shadow。Internet Explorer 不支持它，F(xiàn)irefox 將在即將發(fā)行的3.5版本中支持。

擴(kuò)展閱讀：

7. @font-face屬性

盡管是最被期待的CSS3 特性 (甚至它在CSS2中就已經(jīng)被引入了)， @font-face在網(wǎng)站上仍然沒有像其它CSS3屬性那樣被廣泛采用.這主要因?yàn)樽煮w授權(quán)和版權(quán)問題：嵌入的字體很容易從網(wǎng)站上下載到，這是字體廠商的主要顧慮。

盡管如此，授權(quán)我呢提貌似已經(jīng)開始解決了。TypeKit 承諾將制定一個(gè)方案，以使設(shè)計(jì)師和字體廠商更容易的統(tǒng)一授權(quán)問題，這將顯著的充實(shí)網(wǎng)站設(shè)計(jì)中的排版并使@font-face 屬性在實(shí)際工作中可用。

Mozilla實(shí)驗(yàn)室JetPack 網(wǎng)站采用font-face規(guī)則來使用DroidSans 字體。

少數(shù)使用該屬性的網(wǎng)站之一是新上線的JetPack MozillaLabs.

要想在你的網(wǎng)站中使用嵌入字體，你必須獨(dú)立的生命每個(gè)樣式(比如， normal, bold 和italic)。請確保只使用被授權(quán)為使用到網(wǎng)站的字體并在需要的時(shí)候給字體的設(shè)計(jì)師一些表揚(yáng)。

在定義了@font-face 規(guī)則之后，你就可以用普通的font-family 屬性來引用該字體了：

如果一個(gè)瀏覽器不支持@font-face，它將使用font-family(CSS 字體庫)屬性中指定的下一個(gè)字體。對支持的瀏覽器來說，如果@font-face 字體是一個(gè)奢侈品（只有少數(shù)元素用到），這對一些網(wǎng)站是可行的；但是如果該字體在設(shè)計(jì)中占有一個(gè)主要的角色或者是公司的視覺特征的一部分，你就可能想使用其它的解決方案，比如sIFR 或Cufón。盡管如此，請記住，這些工具對標(biāo)題或較短的文字更適合，復(fù)制和粘貼此類內(nèi)容比較困難而且對用戶并不友好。

在網(wǎng)站中使用此類字體不是很好嗎？Dave Shea 使用Cufón 和Museo Sans來做的實(shí)驗(yàn)。很漂亮！

瀏覽器支持: @font-face 被Safari 3.1+和chrome支持。Internet Explorer 支持字體。 Opera 10 和Firefox 3.5 將會支持它。字體。 Opera 10 和Firefox 3.5 將會支持它。

擴(kuò)展閱讀：

8. 圓角（邊框半徑）

Border-radius 無需背景圖片就能給HTML元素添加圓角。現(xiàn)在，它可能是使用最多的CSS3屬性了，很簡單的原因是使用圓角比較好而且不會對設(shè)計(jì)和可用性有沖突。

不同于添加Javascript或多于的HTML標(biāo)簽，僅僅需要添加一些CSS屬性并從好的方面考慮。這個(gè)方案是清晰的和比較有效的，而且可以讓你免于花費(fèi)幾個(gè)小時(shí)來尋找精巧的瀏覽器方案和基于Javascript圓角。

Sam Brown的博客在標(biāo)題、分類和鏈接處使用了border-radius.

Sam Brown在他的博客的標(biāo)題、分類、鏈接和p中大量的使用了border-radius屬性。使用圖片來實(shí)現(xiàn)該效果將會比較費(fèi)時(shí)的，這是在項(xiàng)目中使用CSS3屬性是提高開發(fā)效率的重要步驟的原因之一

為了給類別鏈接添加圓角，Sam 使用了下面的CSS片段：

我們可以做的更進(jìn)一步，添加原始的CSS3 屬性和Konqueror 屬性擴(kuò)展，如下:

如果我們想在我們的元素中的某個(gè)特定的角上應(yīng)用此屬性，我們可以單獨(dú)的指定每個(gè)角：

瀏覽器支持： border-radius只有所有版本的IE瀏覽器和Opera不支持，Webkit和Gecko核心的瀏覽器都支持。

擴(kuò)展閱讀：

9. 邊框圖片

border-image 屬性允許你在元素的邊框上設(shè)定圖片， 讓你從通常的solid, dotted 和其它邊框樣式中解放出來。該屬性給設(shè)計(jì)師一個(gè)更好的工具，用它可以方便的定義設(shè)計(jì)元素的邊框樣式，比background-image 屬性(對高級設(shè)計(jì)來說) 或枯燥的默認(rèn)邊框樣式更好用。我們也可以明確的定義一個(gè)邊框可以被如何縮放或平鋪。

SpoonGraphics 博客為它的圖片邊框使用了border-image 屬性。

在SpoonGraphis blog中，border-image被用于圖片邊框，如下所示：

要想定義border-image，我們必須指定圖片地址，圖片的那部分將被剪切并用于元素的每一個(gè)邊上，以及圖片是否被縮放或平鋪。

為了制作一個(gè)使用下面的圖片作為邊框的p ，我們應(yīng)該使用下面的代碼(我們將為這個(gè)例子添加Opera 和Konqueror 支持):

該屬性的最后一個(gè)值可以是stretch (默認(rèn)), round (只有一個(gè)平鋪了整數(shù)倍的圖片被填充在允許的地方) 或repeat。在我們的例子中，上下左右邊框圖片被拉伸。如果我們只想頂部和底部邊框被拉伸，我們可以使用下面的CSS:

我們可以可以單獨(dú)的指定每一個(gè)角，如果我們想為每一個(gè)角使用不同的圖片：

如果瀏覽器不支持border-image 屬性，它將無視這些屬性，并只應(yīng)用定義的其它邊框?qū)傩裕热鏱order-width 和border-color.

瀏覽器支持: border-image 目前只有Webkit核心瀏覽器支持。不太確定Firefox的下一個(gè)版本是否支持。

擴(kuò)展閱讀：

10. 盒陰影

box-shadow 屬性可以對HTML元素添加陰影 而不用額外的標(biāo)簽或背景圖片。類似text-shadow 屬性，它增強(qiáng)設(shè)計(jì)的細(xì)節(jié)；而且因?yàn)樗挥绊憙?nèi)容的可讀性，隨意他可以是增加那種額外感覺/效果的一種很好的方法。

10to1 為它的導(dǎo)航北京和hover狀態(tài)使用了box-shadow 屬性.10to1 為其導(dǎo)航區(qū)域增加的一個(gè)簡單的陰影并將該屬性應(yīng)用于導(dǎo)航鏈接的hover效果:

box-shadow屬性可以用多個(gè)值：水平偏移、垂直偏移、模糊半徑、伸展半徑和陰影顏色。水平和垂直偏移和陰影色使用的最多。

在一個(gè)p上應(yīng)用紅色陰影，右邊和下邊偏移4px，無模糊，我們可以使用下面的代碼：

瀏覽器支持: box-shadow目前只有Webkit核心瀏覽器支持，但是即將發(fā)布的Firefox 3.5 也將提供很好的支持。

擴(kuò)展閱讀：

11. 盒子大小

根據(jù)CSS 2.1 規(guī)范，在計(jì)算盒子的總大小的時(shí)候，元素的邊框和padding應(yīng)該被加入到寬度和高度之中的。但是眾所周知，舊的瀏覽器卻以它們自己的非常有“創(chuàng)意”的方式來解釋這個(gè)規(guī)范。box-sizing屬性允許你指定瀏覽器如何計(jì)算一個(gè)元素的寬度和高度。

WordPress 在控制面板的所有的輸入框元素中使用border-box 屬性。

WordPress 后臺區(qū)域在它的所有text類型的input標(biāo)簽和textarea標(biāo)簽上使用了該屬性:

第三個(gè)屬性(-ms-box-sizing) 只有在Internet Explorer 8下有效。通過其他選擇器，WordPress 的樣式表同樣添加了Konqueror 屬性： -khtml-box-sizing。

box-sizing 屬性可以兩個(gè)值中的一個(gè)：border-box 和content-box。 Content-box如CSS2.1中的定義的那樣渲染寬度。Border-box 從設(shè)定的寬度和高度中扣除padding和邊框(如老式瀏覽器那樣。)。

瀏覽器支持：box-sizing 被IE8、Opera、Gecko核心和Webkit核心瀏覽器支持。

擴(kuò)展閱讀：

12. 媒體查詢

媒體查詢（media queries）可以讓你為不同的設(shè)備基于它們的能力定義不同的樣式。比如，在可視區(qū)域小于480像素的時(shí)候，你可能想讓網(wǎng)站的側(cè)欄顯示在主內(nèi)容的下邊，這樣它就不應(yīng)該浮動并顯示在右側(cè)了：

你也可以指定使用慮色屏的設(shè)備：

潛力是無限的。這個(gè)屬性是很有用的因?yàn)槟隳悴辉谛枰仨殲椴煌脑O(shè)備寫?yīng)毩⒌臉邮奖砹耍夷阋矡o需使用JS來確定每個(gè)用戶的瀏覽器的屬性和功能。一個(gè)實(shí)現(xiàn)一個(gè)靈活的布局的更加流行的基于Javascript的方案是使用智能的流體布局，讓布局對于用戶的瀏覽器分辨率更加靈活。

瀏覽器支持： 媒體查詢被基于webkit核心的瀏覽器和Opera支持。Firefox將在3.5版本中支持它。IE目前不支持這些屬性而且在將來的版本中，也沒有支持的計(jì)劃。

擴(kuò)展閱讀：