用CSS3将你的设计带入下个高度[译]（12）

12. 媒体查询

媒体查询（media queries）可以让你为不同的设备基于它们的能力定义不同的样式。比如，在可视区域小于480像素的时候，你可能想让网站的侧栏显示在主内容的下边，这样它就不应该浮动并显示在右侧了：

#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来确定每个用户的浏览器的属性和功能。一个实现一个灵活的布局的更加流行的基于Javascript的方案是使用智能的流体布局，让布局对于用户的浏览器分辨率更加灵活。

浏览器支持： 媒体查询被基于webkit核心的浏览器和Opera支持。Firefox将在3.5版本中支持它。IE目前不支持这些属性而且在将来的版本中，也没有支持的计划。

扩展阅读：

• 媒体查询: W3C 候选推荐

• 扩展到CSS 3 媒体查询

• 媒体查询: CSS3.info

• The bleeding edge of web: media queries

• 安全的媒体查询

• 媒体类型

13. 语音

CSS3的语音模块CSS3可以让你为屏幕阅读者指定语音样式。你可以控制语音的不同设置，比如:

• voice-volume
  使用从0到100的数字(0 即静音)、百分数或关键词(silent, x-soft, soft, medium, loud 和x-loud等)来设置音量。

• voice-balance
  控制来自哪个声道(如果用户的音箱系统支持立体声)。

• Speak
  指示屏幕阅读器阅读相关的文字、数字或标点符号。可用的关键词为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
  控制阅读的速度。可以设置为百分数或关键词: x-slow, slow, medium, fast 和x-fast.

• voice-stress
  指示应该使用的任何重音(强语气)，使用不同的关键词: none, moderate, strong 和 reduced.

比如，告诉屏幕阅读器使用男声读取所有的h2 标签，用左边的喇叭，用软调按照指定的声音，可以像下面这样指定样式：

h2 {
 voice-family: female;
 voice-balance: left;
 voice-volume: soft;
 cue-after: url(sound.au);
 }

不幸的是，这个属性现在只有非常少的支持，但是显然值得关注因为我们可以在将来提高我们网站的易用性。

浏览器支持: 现在，只有Opera 浏览器（Windows XP and 2000）支持语音模块的部分属性。为了使用它们，需要使用-xv- 前缀，比如-xv-voice-balance: right。

扩展阅读：

• CSS3 语音模块——W3C 工作草案

• CSS3 语音 — CSS3.info

• 听觉CSS: 支持CSS 2 听觉样式表 / CSS 3 语音模块

结尾

CSS3 属性可以极大的提高你的工作流，让一些最耗时的CSS任务不费吹灰之力就能搞定，并且可以使用更好、更简洁和更轻的代码标签。一些属性尚未被广泛的支持，甚至是最新的浏览器，但这并不意味着我们不能用它们进行试验或者为使用先进浏览器的用户更高级的功能和CSS样式。

在这点儿上，请记住，培养我们的用户 也同样是有用和必须的：网站无需看起来在每个浏览器里都要保持一致，而且如果一个差异不（负面）影响美学和网站的可用性，它就应该是被考虑的。如果我们继续浪费大量的时间和金钱以使每个细节绝对一致(而不是采用更灵活的和未来导向的方案)， 用户将没有升级他们的浏览器的任何需要/动机，这样我们就不得不在旧的浏览器变为古董级浏览器以及强大的现代浏览器变为标准之前等待很长的时间

我们试验和使用新的CSS3属性越早，它们就被流行的浏览器支持的更早，我们也就能够更早的广泛使用它们。

推荐阅读及资源：

• CSS3 Previews: CSS3.info

• CSS 3: Exciting Function and Features: 30 Useful Tutorials

• 5 CSS3 Techniques For Major Browsers using the Power of jQuery

• Introduction to CSS3 – Part 1: What is it?

• Comparison of layout engines (Cascading Style Sheets) and Wikipedia

• Progressive enhancement

• Five CSS design browser differences I can live with

• Progressive Enhancement with CSS

• CSS support in Opera 9.5

关于原作者

Inayaili de León是一个葡萄牙的网页设计师。她对网页设计和前端编码真的非常感兴趣，而且喜欢漂亮和简洁的网站。她居住在伦敦。你可以在Web Designer Notebook上看到她的更多文章，并follow her on Twitter.