CSS的未來：一些試驗性CSS屬性

盡管現代浏覽器已經支持了眾多的CSS3屬性，但是大部分設計師和開發人員貌似依然在關注於一些很“主流”的屬性，如border-radius、 box-shadow或者transform等。它們有良好的文檔、很好的測試並且最常用到，所以如果你最近在設計網站，你很難能脫離它們。

但是，隱藏在浏覽器的大寶庫中是一些高級的、被嚴重低估的屬性，但是它們並沒有得到太多的關注。或許它們中的一些應該這樣(被無視)，但是其它的屬 性應該得到更多的認可。最偉大的財富隱藏在Webkit的下面，而且在iPhone、iPad和Android apps的時代，開始了解它們會灰常有用。就連Firefox等使用的Gecko引擎，也提供了一些獨特的屬性。在本文中，我們將看一下鮮為人知的CSS 2.1和CSS3屬性以及它們在現代浏覽器中的支持情況。

說明: 對於每個屬性，我們這裡規定：”WebKit” 即指代使用Webkit內核的浏覽器(Safari、Chrome、iPhone、iPad、Android等)，”Gecko“指代采用Gecko內核的浏覽器(Firefox等)。然後有的屬性是官方CSS 2.1. 規范的一部分，這意味著更多的浏覽器甚至一些古老的浏覽器也會支持它們。最後，一個CSS3 的標簽標明遵守這個標准，被最新的浏覽器版本——比如Firefox 4、Chrome 10、Safari 5、Opera 11.10以及IE9支持的屬性。

WebKit特有屬性

-webkit-mask

這個屬性是相當強大的，所以詳細的介紹超出了本文的范疇，它非常值得深入研究，因為它可以在實際應用中為你省掉很多時間。

-webkit-mask讓為一個元素添加蒙板成為可能，從而你可以創建任意形狀的花樣。蒙板可以是CSS3漸變或者半透明的PNG圖片。蒙板元素 的alpha值為0的時候會覆蓋下面的元素，為1的時候會完全顯示下面的內容。相關的屬性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，嚴重依賴來自於background中的語法。更多信息請查看webkit的博客和下面的鏈接。

示例

圖片蒙板:

1
2
3
4

.element{
background: url(img/image.jpg) repeat;
-webkit-mask: url(img/mask.png);
}

示例

漸變蒙板:

1
2
3
4

.element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

-webkit-text-stroke

CSS邊框的一個不足就是只有矩形的元素才能使用。-webkit-text-stroke可以為文字添加邊框。它不但可以設置文字邊框的寬度，也能設置其顏色。而且，配合使用color: transparent屬性，你還可以創建镂空的字體！

示例

為所有的<h1>標題設定一個2px寬的藍色邊框:

1

h1 {-webkit-text-stroke: 2px blue}

另一個特性是，通過設定1px的透明邊框，可以讓文字變得平滑:

1

h2 {-webkit-text-stroke: 1px transparent}

創建紅色镂空字體：

1
2
3
4

h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}

-webkit-nbsp-mode

換行有時是很棘手的事情：有時你希望文字在適當的地方斷行(而不是折行)，有時你又不想這樣。一個能控制這個的屬性就是-webkit-nbsp- mode，它讓你可以改變&nbsp;空白符的行為，強制文字在它被用到的地方斷行。通過設置值為space即可實現。

-webkit-tap-highlight-color

這個屬性只用於iOS (iPhone和iPad)。當你點擊一個鏈接或者通過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。要重設這個表現，你可以設置-webkit-tap-highlight-color為任何顏色。

想要禁用這個高亮，設置顏色的alpha值為0即可。

示例

設置高亮色為50%透明的紅色:

1

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏覽器支持: 只有iOS(iPhone和iPad).

zoom: reset

通常來說，zoom是一個IE專用的屬性。但是webkit也開始支持它了，而且使用值reset，webkit可以實現不錯的效果(有趣的是，IE不支持這個值)。它讓你重設掉浏覽器中正常的縮放行為——如果某個元素被聲明了zoom:reset，頁面上的其它元素在用戶放大頁面的時候都會跟著放大。

注：其實，我們常用來禁用chrome強制字體大小的時候用到的-webkit-text-size-adjust:none;也是可以實現類似的效果，不同的是，設置該屬性的元素內的文字不會被放大/縮小，但是頁面上的其它元素則會變化——神飛

-webkit-margin-collapse

這個屬性屬於限制級的，但是它還是非常值得關注。通常，兩個相鄰的元素的margin會折疊起來(collapse)。這意味著第一個元素的底部的邊距和第二個元素的頭部邊距會被合並到一起。

最常見的例子就是兩個相鄰的<p>元素會共享他們的margin值。想要控制這個表現，我們可以使用-webkit-margin- collapse及其分拆後的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse 等屬性。默認值是collapse，值separate則停止共享margin值，也就是說，第一個元素的底部邊距和第二個元素的頭部邊距會正常疊加。

-webkit-box-reflect

你還記得幾乎每個網站都把他們的網站logo或者頭部的文字做成倒影的那個年代嗎？謝天謝地，那個年代已經過去了，但是如果你要在一些按鈕、導航、或者其他UI元素上更好的使用這個技術，-webkit-box-reflect是更好的選擇。

 

這個屬性接受above、below、left和right四個關鍵詞，它們設置倒影的方向，它們和一個設置元素和它的倒影建的距離的數字一起使用。同時，蒙板圖片也是同樣支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影會自動生成並對布局沒有影響。下面的元素只用了CSS，第二個按鈕用了-webkit-box-reflect屬性。

示例

這個倒影會出現在它的父元素的下面並有5px的間距:

1

-webkit-box-reflect: below 5px;

這個倒影會投射到元素的右邊，沒有間距。然後，一個蒙板將會被應用(url(mask.png)):

1

-webkit-box-reflect: right 0 url(mask.png);

-webkit-marquee

另一個屬性讓我們回到美好的從前：那個遍地marquee(跑馬燈)的年代。有趣的是這個已經被遺棄的標簽反而在現在變的很有用，比如我們在比較小的手機屏幕上切換內容，如果不斷行的話文字將不能完全顯示。

ozPDA創建的這個天氣的應用很好的使用了它。 (如果你木有看到變換的文字，可以嘗試換一個城市來體驗。需要使用WebKit內核浏覽器