word-wrap
當(dāng)文字在一個(gè)比較窄的容器中時(shí)，它的某個(gè)部分可能會(huì)因?yàn)樘L(zhǎng)而不能正確的換行。比如鏈接就常常引起問題。如果你不想用overflow: hidden隱藏溢出的文字，那么你就可以設(shè)置 word-wrap 為break-word，它可以讓字符串在到達(dá)容器的寬度限制時(shí)換行。
示例
div {
width: 50px;
word-wrap: break-word;
}
瀏覽器支持: CSS 3，所有現(xiàn)代瀏覽器。
擴(kuò)展閱讀: W3C
resize
如果你在使用Firefox或Chrome，那么你肯定注意到了文本框的右下角默認(rèn)有個(gè)小的手柄，它可以讓你調(diào)整它們的大小。這個(gè)標(biāo)準(zhǔn)的行為由CSS3 屬性 resize: both實(shí)現(xiàn)。
但是它并不僅限于textarea。它可以用于所有的HTML元素。horizontal 和 vertical 值用于控制調(diào)整水平方向還是垂直方向。
請(qǐng)注意：對(duì)于display:block元素，如果設(shè)置了overflow:visible，resize屬性將會(huì)無效(這一點(diǎn)原文描述不詳——by 神飛)。
瀏覽器支持: CSS3, 除了Opera和IE以為的其它最新的瀏覽器。
擴(kuò)展閱讀: Safari Developer Library
background-attachment
當(dāng)你為一個(gè)設(shè)置了overflow:auto的元素指定背景圖片的時(shí)候，當(dāng)內(nèi)容太多而出現(xiàn)滾動(dòng)條后，拖動(dòng)滾動(dòng)條就會(huì)發(fā)現(xiàn)背景圖片的位置是固定的，而不是隨著滾動(dòng)條移動(dòng)。如果你想要背景圖片隨著內(nèi)容而滾動(dòng)，可以設(shè)置background-attachment:local。
瀏覽器支持: CSS 3，除了Firefox以外的所有現(xiàn)代瀏覽器，F(xiàn)irefox是支持background-attachment屬性的，只是不支持local值.
擴(kuò)展閱讀: W3C
text-rendering
隨著越來越多的網(wǎng)站開始用@font-face來渲染文字，易讀性開始被關(guān)注了。小號(hào)字體上，文字會(huì)更容易出現(xiàn)。由于目前還沒有CSS屬性控制顯示在線字體的微妙細(xì)節(jié)，你可以利用text-rendering來啟用kerning 和 ligatures。
Gecko 和WebKit 瀏覽器處理這個(gè)屬性的方式很不一樣。前者默認(rèn)啟用這個(gè)特性，而后者，你需要將其設(shè)置為optimizeLegibility。
瀏覽器支持: CSS3, 所有WebKit 和Firefox瀏覽器.
擴(kuò)展閱讀: W3C
transform: rotateX/transform: rotateY
如果你已經(jīng)開始使用CSS3，那么你可能會(huì)比較熟悉transform: rotate()，這個(gè)在z軸上旋轉(zhuǎn)元素的屬性。
但是你是否也知道，它也可以更深入的旋轉(zhuǎn)的(比如，圍繞x軸和y軸)？ 這些變形結(jié)合-webkit-backface-visibility: hidden會(huì)更合適。
示例
如果你鼠標(biāo)經(jīng)過這個(gè)元素，它將會(huì)旋轉(zhuǎn)180°，倒轉(zhuǎn)過來:
div:hover {
transform: rotateY(180deg);
}
小技巧:如果只是映射一個(gè)元素，你可以設(shè)置transform為rotateX(180deg) (對(duì)應(yīng)rotateY)或者設(shè)置transform 為scaleX(-1) (對(duì)應(yīng)scaleY).
瀏覽器支持: CSS3, WebKit、firefox、Opera以及IE9
擴(kuò)展閱讀: W3C，你需要知道的CSS3 動(dòng)畫技術(shù)
結(jié)語
正如你希望見到的，還有很多未知的很有用的屬性。他們中的很多仍然處于試驗(yàn)性階段并且可能一直這樣甚至最終可能會(huì)被瀏覽器擯棄。而有些有望在后續(xù)版本中被所有的瀏覽器支持。
然而，很難判斷判斷他們中的一些是好是壞，WebKit特有的屬性隨著iOS和Android的成功顯得越來越重要。當(dāng)然，一些CSS3屬性多多少少已經(jīng)可以使用了。
如果你不喜歡私有屬性，你可以將它們視為實(shí)驗(yàn)直到可以在代碼中實(shí)現(xiàn)以增強(qiáng)用戶體驗(yàn)。同時(shí)，W3C的CSS validator 同樣支持私有屬性，它會(huì)返回警告而不是錯(cuò)誤。
祝你體驗(yàn)快樂！
PS：本文提到了很多特性，但是只是個(gè)概覽，其實(shí)基本上每個(gè)屬性都可以深入研究下的，如果你有興趣，歡迎深入研究并分享之，謝謝——神飛。
本文原作者Christian Krammer是最近很牛B的css3files.com的站長(zhǎng)。
本文鏈接：http://www.95time.cn/tech/web/2011/8473.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 CSS的未來:一些試驗(yàn)性CSS屬性 [7] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 8 頁 CSS的未來:一些試驗(yàn)性CSS屬性 [8]
