你可能不知道的10個CSS3中的隱藏特性

TP_funny發表於2014-11-23

CSS3為web設計增添了許多令人驚歎的特性，這其中你經常會用到box-shadow（圖層陰影），border-radius（邊框圓角），transform（變形）這一類受歡迎的常用特性。但是還有一些強大的功能，你可能沒有接觸到，它們就象是埋藏在地下的寶藏，靜靜等待著你的發掘。

W3C正不斷致力於為設計師、開發人員和使用者開發新的CSS特性，下面我們就來看看你可能不知道的CSS3中的10個隱藏特性：

1.Tab尺寸控制

大多數程式碼編輯器配有Tab尺寸控制，開發者可以對指定程式碼的縮排所使用的Tab鍵的寬度進行控制。而現在，這個功能已經對嵌入在網頁的定製程式碼開放了。

注意，每個瀏覽器可能都有對Tab佔用寬度的不同說明。所以，我們在不同的瀏覽器上會看到一些差異。我目前所知道的支援這個功能的瀏覽器包括：Chrome，Opera，Firefox和Safari。

2.文字渲染

文字渲染的特性可以讓瀏覽器知道如何在網頁中渲染文字。文字優化所涉及的效能、易讀性、精度將會決定到文字的質量。看看下面截圖兩個版本的字距調整，來辨別一下“正常”版和“易讀性優化”版的差別吧。

3.字型伸縮

除了常規的正常，粗體和斜體，其它的字型設定也會提供不一樣的感官設計。Helvetica Neue或者Myriad Pro字型就是其中的例子，對於字型的伸縮程度，它們有“Condensed”，“Ultra-condensed”，和“Semi-condensed”幾種設定，這些都可以通過一個名為font-stretch（字型伸縮）的特性來實現
。

我們可以使用字型伸縮結合文字特性（比如使用字型樣式），舉一個例子：

font-stretch（字型伸縮）特性目前只能在Firefox和Internet Explorer 9（及以上版本）使用。

4.文字溢位

文字溢位特性指定了容器中溢位或者被截斷內容的呈現方式。預設的處理方式是截斷，被截斷的內容會被隱藏起來。你可以設定用省略號來代表被截斷的文字或者進行省略。如下圖所示：

正如你所想的，末尾三個點的省略號代表了被省略的內容。

5.書寫模式

並不是每一種語言都是從左到右的書寫的，有一些語言是從上到下的比如日語，還有一些語言是從右到左的比如阿拉伯語和希伯來語。
為了適應這些語言，CSS引入了名為書寫模式的新特性來幫助開發人員改變內容的書寫方向。例如，這個程式碼片斷就是讓本文書寫的內容保持從左到右的順序（無論什麼語言）

改變文字內容的順序為從上到下，這可以通過設定為vertical-l,r來實現：

6.指標事件

pointer-events（指標事件）屬性可以讓開發人員控制滑鼠指標在拖下，懸停和點選等事件下的行為。使用下圖的命令後，指標點選連結將不會產生任何效果，連結會被完全禁用，而href標籤中所指定的地址位置也會成為擺設。

關於指標事件的一些關鍵問題將會在下一個版本CSS4中得到解決。

7.圖片定向

在Photoshop等圖片編輯器裡，你可以通過旋轉或翻轉等改變圖片的方向。現在，CSS3中的image-orientation（圖片定向）功能可以讓你可以對網頁上的圖片完成同樣的處理。這裡是一個如何讓圖片進行水平翻轉的例子：

你可以通過恢復映象（from-image）來保留原來圖片的方向：

8.圖片渲染

類似於文字渲染特性，影像渲染定義了網頁上的圖片質量，特別是可改變圖片的大小。這個特性是由一堆數值組成的，不同的瀏覽器對於這些數值的設定都不一樣。比如，crisp-edges這個用於儲存圖片對比度並可預防圖片邊緣模糊的特性在Chrome極速瀏覽器裡會使用webkit-optimize-contrast，而在IE瀏覽器裡會使用nearest-neighbor。