定義未來Web樣式 CSS 3最新特性一覽
原創(chuàng)【51CTO獨(dú)家譯稿】HTML 5和CSS 3是目前Web領(lǐng)域被討論的熱門話題，HTML 5被看做是未來的Web開發(fā)標(biāo)準(zhǔn)，而CSS 3的新特性也讓人們備受期待。注：文中所提到的一些新功能還未正式發(fā)布到CSS 3規(guī)范中。
最基礎(chǔ)的東西
剛?cè)腴T的網(wǎng)頁設(shè)計(jì)人員最常犯的錯(cuò)誤是創(chuàng)建一個(gè)無法修改的樣式表，容納了過多的class（類）和id，維護(hù)難度非常大。假設(shè)你想改變你發(fā)布的文章的標(biāo)題顏色，而其它文章的標(biāo)題顏色保持默認(rèn)的顏色，不用給每個(gè)標(biāo)題都增加一個(gè)big-red類，明智的方法是使用div類打包你發(fā)布的文章（可能是post），然后為你想要修改的標(biāo)題創(chuàng)建一個(gè)選擇器，如：
- .post h2 {
- font-weight: bold;
- color: red;
- }
這就是CSS的巨大魅力所在，也是CSS中最基礎(chǔ)的內(nèi)容。
字體屬性
除了單獨(dú)指定每個(gè)屬性外，你可以使用字體簡寫屬性一次性指定所有屬性，屬性的順序如下：font-style，font-variant，font-weight，font-size，line-height，font-family。使用字體簡寫屬性時(shí)，任何未被指定的值將被其父值取代，例如，如果你只定義了12px Helvetica, Arial, sans-serif，那么font-style，font-variant和font-weight將被設(shè)為nomal。字體屬性也可以用于指定系統(tǒng)字體：caption，icon，menu，message-box，small-caption，status-bar。這些值與系統(tǒng)使用的字體有關(guān)，因此會根據(jù)用戶的喜好有所不同。
其它字體屬性
有一些與字體相關(guān)的屬性和值不常用，例如，一般不會使用text-transform將文本全部轉(zhuǎn)換為大寫，更多的是使用font-variant: small-caps實(shí)現(xiàn)更優(yōu)雅的效果。在設(shè)置字體的權(quán)重時(shí)，你可能不會使用常見的regular和bold屬性，CSS允許你使用100到900（如100，200，500等）的值指定字體的權(quán)重，你要知道的是400表示nomal權(quán)重，700表示bold，如果沒有給出字體的權(quán)重，它將繼承其父容器的字體權(quán)重。另一個(gè)非常有用的屬性是font-size-adjust，但可悲的是目前僅Firefox 支持它，它允許你指定字體的長寬比。
處理空格，換行和文字環(huán)繞
有多個(gè)CSS屬性可以幫助處理這些問題，但規(guī)范仍然在制定中（處于工作草案階段）。
空格
white-space屬性允許你指定一組簡寫屬性：white-space-collapsing和text-wrap。下面是每個(gè)屬性所代表的分類：
◆normal
white-space-collapsing: collapse/text-wrap: normal
◆nowrap
white-space-collapsing: collapse/text-wrap: none
◆pre-wrap
white-space-collapsing: preserve/text-wrap: normal
◆pre-line
white-space-collapsing: preserve-breaks/text-wrap: normal
這個(gè)屬性非常有用，例如，在網(wǎng)頁上顯示代碼片段時(shí)，可以保留換行和空格，設(shè)置容器white-space: pre將保留格式。ordPress在它的儀表板上使用了white-space: nowrap，因此，如果表格太小，單元格中的數(shù)字是不會換行的。
圖 1 WordPress儀表板使用white-space: nowrap的效果
換行
另一個(gè)被廣泛使用的屬性是word-wrap，它有兩個(gè)有效的屬性值：normal和break-word。如果你將word-wrap設(shè)為break-word，如果字符串太長，它將會溢出容器。理論上，word-wrap: break-word應(yīng)該在text-wrap設(shè)為nomal或suppress（抑制換行）時(shí)才有效，但實(shí)際上，即使text-wrap被設(shè)為其它值它也一樣可以工作。請注意，word-break屬性的break-strict值因?yàn)橛酗L(fēng)險(xiǎn)，已經(jīng)被移除CSS規(guī)范了。
圖 2 國際大猩猩保護(hù)計(jì)劃網(wǎng)站為評論家的名字使用了word-wrap
單詞間距和字母間距
word-spacing和letter-spacing分別用于控制單詞間間距和字母間間距，它們都有三個(gè)代表最佳、最小和最大間距的屬性值。對于word-spacing，如果只設(shè)置一個(gè)值，它表示最佳間距（其它兩個(gè)默認(rèn)被設(shè)為normal），如果設(shè)兩個(gè)值，第一個(gè)代表最佳間距和最小間距，第二個(gè)代表最大間距，如果設(shè)三個(gè)值，那分別代表最佳間距，最小間距和最大間距，如果沒有特殊原因，使用最佳間距。letter-spacing稍有不同，如果只設(shè)置一個(gè)值，那它表示三個(gè)屬性值都一樣，其它設(shè)置方式就和word-spacing一樣了。
圖 3 Show & Tell網(wǎng)站在其導(dǎo)航欄上使用letter-spacing的效果
縮進(jìn)和懸掛
文本縮進(jìn)和懸掛是兩個(gè)經(jīng)常被忘掉的網(wǎng)頁排版功能，這可能是因?yàn)椋?/p>
1、設(shè)置復(fù)雜
2、有意不使用
3、設(shè)計(jì)人員不知道如何使用
圖 4 Sushi & Robots網(wǎng)站在它的項(xiàng)目符合列表中使用了懸掛
理論上每一段的開頭都應(yīng)該使用縮進(jìn)，因此可以使用：
- p + p {
- text-indent: 1em;
- }
這個(gè)選擇器的目標(biāo)是每一個(gè)段落（如p）后的段落，因此對第一個(gè)段落無效。另一個(gè)受歡迎的排版規(guī)則是項(xiàng)目符號和引用內(nèi)容應(yīng)該懸掛，這樣能保證正文視覺不受這些內(nèi)容的影響。CSS3規(guī)范定義了一個(gè)hanging-punctuation屬性，但目前還未完工。現(xiàn)在可以使用text-indent屬性，通過負(fù)數(shù)屬性值達(dá)到同樣的效果：
- blockquote {
- text-indent: -0.2em;
- }
對于項(xiàng)目符號列表，確保項(xiàng)目符號的位置設(shè)為outside，容器div不要設(shè)為overflow: hidden，否則，項(xiàng)目符合將不可見。 #p#
網(wǎng)頁字體和字體裝飾
font-face
關(guān)于font-face在網(wǎng)絡(luò)上的討論已經(jīng)夠多了，爭論的焦點(diǎn)是這個(gè)屬性是否會給設(shè)計(jì)帶來視覺上的混亂，有些人認(rèn)為應(yīng)該按自己意愿選擇任意字體，但另外的人則認(rèn)為應(yīng)該使用網(wǎng)頁安全字體。
圖 5 Jonathan Snook最近使用font-face屬性重新設(shè)計(jì)的網(wǎng)站
無論你持何種觀點(diǎn)，有一點(diǎn)你必須得承認(rèn)，使用font-face的網(wǎng)站看起來就是要美觀些。font-face屬性的使用是相當(dāng)簡單的，首先上傳你想使用的字體到你的網(wǎng)站，并給它取一個(gè)好的名字。font-face的基本格式如下：
- @font-face {
- font-family: Museo Sans;
- src: local(“Museo Sans”), url(MuseoSans.ttf) format(“opentype”);
- }
font-face必須要的兩個(gè)描述符是font-family和src，如果你想給h2標(biāo)題使用特殊字體，那么可以：
- h2 {
- font-family: Museo Sans, sans-serif;
- }
對于第二個(gè)屬性src，我們可以利用它做兩件事情：
1、如果字體已經(jīng)安裝到用戶系統(tǒng)上，CSS將會直接使用本地字體，我們可以利用這種機(jī)制跳過下載字體的步驟，這樣可以節(jié)省帶寬。
2、如果用戶系統(tǒng)上沒有安裝需要的字體，CSS首先要下載URI鏈接的字體文件，另外我們也指定了字體格式，但這一步也是可以忽略的。這個(gè)屬性在IE中工作時(shí)，需要使用EOT版本的字體，有些字體廠商提供了EOT版本的字體，但大多數(shù)時(shí)候我們需要使用微軟的WEFT或ttf2eot工具轉(zhuǎn)換TrueType字體。
text-shadow
text-shadow屬性允許你給文本添加一個(gè)陰影，這個(gè)陰影同時(shí)應(yīng)用給文本和文本裝飾，如果文本應(yīng)用了text-outline屬性，陰影將從文本輪廓?jiǎng)?chuàng)建。使用這個(gè)屬性你可以設(shè)置陰影的水平和垂直偏移（相對于文本），陰影顏色和模糊半徑，下面是一個(gè)完整的text-shadow示例：
圖 6 Neutron使用text-shadow創(chuàng)建的網(wǎng)站
- p {
- text-shadow: #000000 1px 1px 1px;
- }
顏色和模糊半徑（最后的值）是可選的，你也可以給陰影使用RGB顏色值，使其透明，如：
- p {
- text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
- }
這里我們定義了顏色的RGB值和一個(gè)alpha透明值（a，值為0.5）。對于text-shadow，規(guī)范仍然有一些懸而未決的問題，如元素的陰影與相鄰元素重疊在一起時(shí)，瀏覽器該如何處理。
新的Text-Decoration屬性
text-underline屬性的一個(gè)問題是給我們的控制很少，但最新的草案提議的新屬性和改進(jìn)的屬性可能會給我們更精細(xì)的控制，目前還不能使用它們，因此這里只簡要介紹一下。
◆text-decoration-line
取值和text-decoration: none，underline，overline，line-through一樣。
◆text-decoration-color
指定前一屬性的線條顏色。
◆text-decoration-style
有效的取值范圍是solid，double，dotted，dashed和wave。
◆text-decoration
前面三個(gè)屬性的簡寫，如果你指定了none，underline，overline或line-through中的任一個(gè)值，這個(gè)屬性將會向后與CSS1和CSS2兼容，但如果你指定了三個(gè)值，如text-decoration: red dashed underline，在不支持的瀏覽器中就會忽略它們。
◆text-decoration-skip
指定文本裝飾是否應(yīng)該忽略某種類型的元素，提議的有效屬性值包括：none，images，spaces，ink和all。
◆text-underline-position
使用這個(gè)屬性你可以控制下劃線是否穿過文本的下行字符，有效的屬性值包括：auto，before-edge，alphabetic 和after-edge。#p#
控制溢出
通過text-overflow屬性控制當(dāng)文本溢出其容器時(shí)顯示什么，例如，如果你想讓新聞列表中的所有項(xiàng)目占據(jù)的高度都一樣，這時(shí)你可以使用CSS增加省略號表示由更多的文本內(nèi)容未顯示，在iPhone中我們經(jīng)常看到這樣的應(yīng)用。這個(gè)屬性在最新的Safari、Opera、IE 6（溢出元素應(yīng)該設(shè)置一個(gè)寬度，如100%）和 IE 7中有效，在Opera中還必須加上廠家特殊的屬性。
圖 7 紐約時(shí)報(bào)iPhone應(yīng)用程序客戶端使用省略號表示溢出的文本
- li {
- white-space: nowrap;
- width: 100%;
- overflow: hidden;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- }
在編輯的規(guī)范草案中，你可以看到其它與text-overflow相關(guān)的屬性也被考慮進(jìn)去了，如text-overflow-mode和text-overflow-ellipsis。
對齊和斷字
控制斷字是件麻煩事，在設(shè)置為自動(dòng)斷字時(shí)有許多因素要考慮，不同語言有不同的規(guī)則，就拿葡萄牙文為例，你可以在最后一個(gè)音節(jié)處斷字，對于雙輔音，連字符必須在中右側(cè)。規(guī)范仍在開發(fā)中，但已經(jīng)提議的屬性有：
◆hyphenate-dictionary
◆hyphenate-before和hyphenate-after
◆hyphenate-lines
◆hyphenate-character
圖 8 在w3c網(wǎng)站上為連字符提議的規(guī)范
另一個(gè)在大多數(shù)瀏覽器中還未實(shí)現(xiàn)的CSS3屬性是text-align-last（目前只有IE支持一部分），如果你的文本設(shè)為justify，你可以定義一個(gè)段落的最后一行或一行的右邊在強(qiáng)制斷字前如何調(diào)整，這個(gè)屬性的有效屬性值包括：start，end，left，right，center和justify。
Unicode范圍和語言
Unicode范圍
unicode-range屬性讓你定義給定字體支持的Unicode字符范圍，在限制支持各種語言或數(shù)學(xué)符號時(shí)非常有用，可以減少網(wǎng)絡(luò)帶寬的使用。假設(shè)你想在你的網(wǎng)頁中包括日語字符，使用font-face規(guī)則，需為相同的font-family聲明多次，每個(gè)聲明提供一個(gè)不同的字體文件供瀏覽器下載，同時(shí)每次都要聲明不同的Unicode范圍（即使范圍重疊也得聲明），瀏覽器應(yīng)該只下載渲染網(wǎng)頁需要的范圍。要研究unicode-range是如何工作的，這里有一個(gè)例子。
語言
使用:lang偽類創(chuàng)建語言敏感的排版，這樣你可以為法語（fr）設(shè)置一個(gè)背景色，為德語（de）設(shè)置另一個(gè)背景色：
- div:lang(fr) {
- background-color: blue;
- }
- div:lang(de) {
- background-color: yellow;
- }
你可能會問，為什么我們不使用一個(gè)簡單的選擇器來實(shí)現(xiàn)呢，如：
- div[lang|=fr] {
- background-color: blue;
- }
這樣我們的目標(biāo)就是所有l(wèi)ang屬性等于fr或以fr開頭的div元素，如果我們有一個(gè)元素位于這個(gè)div中，它們不應(yīng)該繼承這個(gè)選擇器的屬性，因?yàn)樗鼈兏揪蜎]有設(shè)置lang屬性，通過使用:lang偽類，lang屬性就讓所有子元素繼承父元素的屬性。好消息是幾乎所有最新的瀏覽器都支持這個(gè)偽類了。
總結(jié)
在本文所列舉的例子中，你可能會問為什么大部分都講得很模糊，是的，因?yàn)橐?guī)范還未獲得正式通過，隨時(shí)間的推移完全有可能會發(fā)生改變，但現(xiàn)在正是試驗(yàn)的時(shí)候，如果你也參與進(jìn)來，將有助于最終規(guī)范的定格。大膽嘗試這些新特性，看看應(yīng)該如何改進(jìn)才能讓你的工作變得更輕松。向規(guī)范增加一個(gè)屬性有實(shí)際的例子非常重要，此外，瀏覽器廠商也需要跟進(jìn)。
【編輯推薦】
- 談DIV+CSS樣式表命名的規(guī)則方法
- 檢測瀏覽器是否支持CSS3的方法
- 純CSS無hacks的跨流覽器多列布局
- 基于JavaScript的相關(guān)CSS技術(shù)概覽
- 國外最新CSS模版推薦及下載
