css3

关注公众号 jb51net

关闭
网页制作 > CSS > css3 >

用CSS3将你的设计带入下个高度

脚本之家


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.