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

级联样式表在13年前被引入，而且被广泛使用的CSS 2.1 标准在11年前被创建，显然我们现在已经与当年相差千里了。相当了不起的是期间网站开发有了多少进步——事实上，我们也无法想象。

为什么会这样呢，当提到CSS的时候，过去我们是如此的不情愿和害怕尝试？为什么我们还要使用讨厌的hack和依赖Javascript的技术来写样式？为什么我们不能利用丰富的CSS3 特性和现代浏览器中可用的工具 并将我们的设计品质带到下一个等级？

是时候在我们的项目中引入CSS3 特性了，不用害怕逐渐在我们的样式表中加入css3特性和选择器会出问题。让我们的客户意识到CSS3的优势 (而且让旧浏览器更快的消失)是我们力所能及的事情——我们应该这样做，特别是在它能够让网站更加灵活并减少开发和维护成本的时候。

在本文中，我们将研究CSS3的优势，并看一下一些网页设计师是如何使用它们的。最后，我们将了解到从CSS3中我们能得到什么以及我们如何在我们的项目中使用它的新特性。

同时请参考我们之前的一篇相关文章：

• 使用CSS3将你的网站设计推向未来

使用浏览器专有属性

为了使用大部分CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分CSS3属性。而且不幸的是，一些属性甚至到最后都可能不被W3C推荐，所以通过指定浏览器专有属性，将他们与标准属性区分开来是很重要的(然后在他们是多余的的时候使用符合标准的样式将之覆盖)。

当然，这种方法的劣势是，将导致一个杂乱的样式表和网站在浏览器之间的表现不一致。毕竟，我们不想在我们的样式表中重拾私有浏览器hack的需求。Internet Explorer的臭名昭著的marquee、blink以及其它标签在大量样式表中被应用，并在20世纪九十年代成为一个传奇；它们依然让现存的很多网站（在其他浏览器中）表现不一致甚至难以阅读。而我们现在也不想将我们自己置于同样的境地，对吧？

然而，网站不需要在所有的浏览器中看起来必须严格的一致。有的时候在某个浏览器中使用私有属性来实现特定的效果是可行的。

最常见的私有属性是用于Webkit核心浏览器的(比如, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）

作为专业的设计师，我们不得不注意：使用这些私有属性将让我们的样式表不能通过验证。所以目前将他们放到最终版的样式中是少见的。但是在某种情况下，比如试验或学习，我们至少可以考虑将他们和标准的CSS属性一起写到一个样式表中。

扩展阅读

• Vendor-specific extensions and W3C
• Vendor-specific extensions to CSS3
• Vendor-specific properties

1. 选择器

CSS选择器是个难以置信地强大的工具：它们允许我们在标签中指定特定的HTML元素而不必使用多余的class、ID 或Javascripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。

属性选择器

三个新的属性选择器被添加到CSS3：

• [att^="value"] 
  匹配包含以特定的值开头的属性的元素
• [att$="value"] 
  匹配包含以特定的值结尾的属性的元素
• [att*="value"] 
  匹配包含含有特定的值的属性的元素

div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}

在这里，(100% 2em) 是background-size 的值；第一个背景图片将会出现在左上角并会被拉伸至该div的100%宽度和2em的高度。

因为只有少数的浏览器支持它，又因为在网站上不显示背景有损网站的视觉效果，所以，这并不是一个被广泛应用了的属性。尽管如此，它显然能够大大地提高设计师的工作流并显著减少标签数量——相对于用其它方式实现同样的效果。

浏览器支持: 目前，多背景图片只在Safari/chrome 和Konqueror中有效

扩展阅读：

• CSS3系列教程:背景图片(背景大小和多背景图)
• Layering multiple background images
• Multiple backgrounds with CSS3 and CSS3.info
• Introduction to CSS3, Part 6: Backgrounds

5. Word Wrap

word-wrap 属性用来防止太长的字符串溢出的。可以用两个属性值normal 和break-word。normal 值(默认的) 只在允许的断点截断文字，如连字符。如果使用了break-word ，文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。

border-image，我们必须指定图片地址，图片的那部分将被剪切并用于元素的每一个边上，以及图片是否被缩放或平铺。

为了制作一个使用下面的图片作为边框的div ，我们应该使用下面的代码(我们将为这个例子添加Opera 和Konqueror 支持):

stretch (默认), round (只有一个平铺了整数倍的图片被填充在允许的地方) 或repeat。在我们的例子中，上下左右边框图片被拉伸。如果我们只想顶部和底部边框被拉伸，我们可以使用下面的CSS:

div {
    (...)
    border-image: url(example.png) 18 25 25 18 stretch repeat;
}

我们可以可以单独的指定每一个角，如果我们想为每一个角使用不同的图片：

div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
    }

如果浏览器不支持border-image 属性，它将无视这些属性，并只应用定义的其它边框属性，比如border-width 和border-color.

浏览器支持: border-image 目前只有Webkit核心浏览器支持。不太确定Firefox的下一个版本是否支持。

扩展阅读：

• The ‘border-image’ property: W3C Working Draft
• Border-image: using images for your border — CSS3.info
• border-image in Firefox
• border-image demonstration page
• Replicating iPhone Buttons the “webkit” way!

10. 盒阴影

box-shadow 属性可以对HTML元素添加阴影 而不用额外的标签或背景图片。类似text-shadow 属性，它增强设计的细节；而且因为它不影响内容的可读性，随意他可以是增加那种额外感觉/效果的一种很好的方法。

 
10to1 为它的导航北京和hover状态使用了box-shadow 属性.

10to1 为其导航区域增加的一个简单的阴影并将该属性应用于导航链接的hover效果:

#navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
}
#navigation li a:hover,
#navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
}

box-shadow属性可以用多个值：水平偏移、垂直偏移、模糊半径、伸展半径和阴影颜色。水平和垂直偏移和阴影色使用的最多。

在一个div上应用红色阴影，右边和下边偏移4px，无模糊，我们可以使用下面的代码：

div {
    -moz-box-shadow: 4px 4px 0 #f00;
    -webkit-box-shadow: 4px 4px 0 #f00;
    box-shadow: 4px 4px 0 #f00;
    }

浏览器支持: box-shadow目前只有Webkit核心浏览器支持，但是即将发布的Firefox 3.5 也将提供很好的支持。

扩展阅读：

• CSS3系列教程:阴影
• The ‘box-shadow’ property — W3C Working Draft
• Box-shadow, one of CSS3’s best new features — CSS3.info
• Apple’s Navigation bar using only CSS
• Box Shadow — Surfin’ Safari blog

11. 盒子大小

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

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

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

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核心浏览器支持。

扩展阅读：

• ‘box-sizing’ property: W3C Candidate Recommendation
• Box-sizing, box-model fixes for the simple people: CSS3.info
• CSS3 box-sizing attribute

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.