12. 媒體查詢
媒體查詢（media queries）可以讓你為不同的設備基于它們的能力定義不同的樣式。比如，在可視區(qū)域小于480像素的時候，你可能想讓網(wǎng)站的側欄顯示在主內(nèi)容的下邊，這樣它就不應該浮動并顯示在右側了： #sidebar {
float: right;
display: inline; /* IE Double-Margin Bugfix */
} @media all and (max-width:480px) {
#sidebar {
float: none;
clear: both;
}
}
你也可以指定使用慮色屏的設備： a {
color: grey;
} @media screen and (color) {
a {
color: red;
}
}
潛力是無限的。這個屬性是很有用的因為你你不在需要必須為不同的設備寫獨立的樣式表了，而且你也無需使用JS來確定每個用戶的瀏覽器的屬性和功能。一個實現(xiàn)一個靈活的布局的更加流行的基于Javascript的方案是使用智能的流體布局，讓布局對于用戶的瀏覽器分辨率更加靈活。
瀏覽器支持： 媒體查詢被基于webkit核心的瀏覽器和Opera支持。Firefox將在3.5版本中支持它。IE目前不支持這些屬性而且在將來的版本中，也沒有支持的計劃。
擴展閱讀：
13. 語音
CSS3的語音模塊CSS3可以讓你為屏幕閱讀者指定語音樣式。你可以控制語音的不同設置，比如:
voice-volume
使用從0到100的數(shù)字(0 即靜音)、百分數(shù)或關鍵詞(silent, x-soft, soft, medium, loud 和x-loud等)來設置音量。
voice-balance
控制來自哪個聲道(如果用戶的音箱系統(tǒng)支持立體聲)。
- Speak
指示屏幕閱讀器閱讀相關的文字、數(shù)字或標點符號�？捎玫年P鍵詞為none, normal, spell-out, digits, literal-punctuation, no-punctuation 和inherit.
- Pauses and rests
在一個元素的被讀完之前或之后設定暫�；蛲Ｖ�。你可以使用時間單位(比如, “2s” 表示2 秒鐘) 或關鍵詞(none, x-weak, weak, medium, strong 和x-strong)。
- Cues
使用聲音限制特定元素并控制器音量。
voice-family
設定特定的聲音類型和聲音合成(就像font-family)。
voice-rate
控制閱讀的速度�？梢栽O置為百分數(shù)或關鍵詞: x-slow, slow, medium, fast 和x-fast.
voice-stress
指示應該使用的任何重音(強語氣)，使用不同的關鍵詞: none, moderate, strong 和 reduced.
比如，告訴屏幕閱讀器使用男聲讀取所有的h2 標簽，用左邊的喇叭，用軟調(diào)按照指定的聲音，可以像下面這樣指定樣式： h2 {
voice-family: female;
voice-balance: left;
voice-volume: soft;
cue-after: url(sound.au);
}
不幸的是，這個屬性現(xiàn)在只有非常少的支持，但是顯然值得關注因為我們可以在將來提高我們網(wǎng)站的易用性。
瀏覽器支持: 現(xiàn)在，只有Opera 瀏覽器（Windows XP and 2000）支持語音模塊的部分屬性。為了使用它們，需要使用-xv- 前綴，比如-xv-voice-balance: right。
擴展閱讀：
結尾
CSS3 屬性可以極大的提高你的工作流，讓一些最耗時的CSS任務不費吹灰之力就能搞定，并且可以使用更好、更簡潔和更輕的代碼標簽。一些屬性尚未被廣泛的支持，甚至是最新的瀏覽器，但這并不意味著我們不能用它們進行試驗或者為使用先進瀏覽器的用戶更高級的功能和CSS樣式。
在這點兒上，請記住，培養(yǎng)我們的用戶 也同樣是有用和必須的：網(wǎng)站無需看起來在每個瀏覽器里都要保持一致，而且如果一個差異不（負面）影響美學和網(wǎng)站的可用性，它就應該是被考慮的。如果我們繼續(xù)浪費大量的時間和金錢以使每個細節(jié)絕對一致(而不是采用更靈活的和未來導向的方案)， 用戶將沒有升級他們的瀏覽器的任何需要/動機，這樣我們就不得不在舊的瀏覽器變?yōu)楣哦墳g覽器以及強大的現(xiàn)代瀏覽器變?yōu)闃藴手暗却荛L的時間
我們試驗和使用新的CSS3屬性越早，它們就被流行的瀏覽器支持的更早，我們也就能夠更早的廣泛使用它們。
推薦閱讀及資源：
關于原作者
Inayaili de León是一個葡萄牙的網(wǎng)頁設計師。她對網(wǎng)頁設計和前端編碼真的非常感興趣，而且喜歡漂亮和簡潔的網(wǎng)站。她居住在倫敦。你可以在Web Designer Notebook上看到她的更多文章，并follow her on Twitter.
本文鏈接：http://m.95time.cn/tech/web/2009/6806.asp 
出處：藍色理想
責任編輯：bluehearts
上一頁 用CSS3將你的設計帶入下個高度 [11] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 12 頁 用CSS3將你的設計帶入下個高度 [12]
