提升你设计水平的CSS3新技术（6）

猫性男孩 · 发表于 2013-4-19 10:16:26

11. 盒子大小

根据CSS 2.1 规范，在计算盒子的总大小的时候，元素的边框和padding应该被加入到宽度和高度之中的。但是众所周知，旧的浏览器却以它们自己的非常有“创意”的方式来解释这个规范。box-sizing属性允许你指定浏览器如何计算一个元素的宽度和高度。

WordPress 在控制面板的所有的输入框元素中使用border-box 属性。

WordPress 后台区域在它的所有text类型的input标签和textarea标签上使用了该属性:

1
2
3
4
5
6
7

input [type = "text" ] ,
textarea {
-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
-ms-box-sizing : border-box ;
box-sizing : border-box ;
}

第三个属性(-ms-box-sizing) 只有在Internet Explorer 8下有效。通过其他选择器，WordPress 的样式表同样添加了Konqueror 属性： -khtml-box-sizing。

box-sizing 属性可以两个值中的一个：border-box 和content-box。 Content-box如CSS2.1中的定义的那样渲染宽度。Border-box 从设定的宽度和高度中扣除padding和边框(如老式浏览器那样。)。

浏览器支持：box-sizing 被IE8、Opera、Gecko核心和Webkit核心浏览器支持。

扩展阅读：

12. 媒体查询

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

1
2
3
4
5
6
7
8
9
10
11

#sidebar {
float : right ;
display : inline ; /* IE Double-Margin Bugfix */
}

@media all and (max-width:480px) {
#sidebar {
float : none ;
clear : both ;
}
}

你也可以指定使用虑色屏的设备：

1
2
3
4
5
6
7
8
9

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 标签，用左边的喇叭，用软调按照指定的声音，可以像下面这样指定样式：

1
2
3
4
5
6

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

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

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

原文链接：http://www.cnblogs.com/hnyei/archive/2011/09/22/2185000.html

		自动登录	找回密码
密码			立即注册

[分享] 提升你设计水平的CSS3新技术（6）

站长推荐 /1