14.1　理解厂商前缀

尽管很多属于CSS3范畴的特性都还未进入W3C的候选推荐标准阶段（意味着相应的规范已经完成），它们的大部分都已经被Firefox、Internet Explorer、Chrome、Safari和Opera的新版本实现了。

尚未完成的（以及偶尔存在竞争的）CSS实现是有可能发生变化的，为了应对这种情况，浏览器在实现一些CSS特性时使用了所谓的厂商前缀。这样，每个浏览器都可以引入自己的CSS属性支持方式，这种方式不会与最终的规范发生冲突，也不会与其他浏览器发生冲突。此外，厂商前缀还能确保将来规范成熟或定稿时，现有的使用实验性实现的网站不会崩溃。

每个主流浏览器都有其自身的前缀：-webkit-（Webkit/Safari/Chrome）、-moz-（Firefox）、-ms-（Internet Explorer）、-o-（Opera）以及-khtml-（Konqueror）。你可能想得到，它们将放置在CSS属性名的前面。不过要记住的是，不必每次都使用全部的前缀。在大多数情况下，只需要-moz-和-webkit-前缀，就像你会在本章示例中看到的那样。为了更好地面向未来，推荐在最后写上一条无前缀版本的声明，如图14.1.1所示。

  1. div {
  2.      -moz-border-radius: 10px;
  3.      -webkit-border-radius: 10px;
  4.      border-radius: 10px;
  5. }

图14.1.1　使用border-radius属性的示例。该属性需要使用厂商前缀（如前两条声明所示）支持旧版本的Firefox和基于Webkit的浏览器（如Chrome和Safari）。这些浏览器的新版本已不再使用有前缀的属性，开始使用无前缀的属性（即如border-radius: 10px;）。照例，样式规则中的最后一条声明优先级最高，这也是将无前缀版本放在最后的原因

在本章中你将看到，这样做意味着用较少的HTML，而用更多的CSS实现所需的效果。

虽然厂商前缀通常会在CSS中造成大量的重复，但这只是前进路上的一点点代价，同时也是Web专业人士已经普遍接受的代价，因为他们已经找到了将在代码中添加前缀的繁琐工作自动化的方法（参见第后一条提示），如图14.1.2所示。

提示　并非所有的CSS3属性都需要使用为浏览器准备的前缀，如text-shadow和opacity（分别参见14.5节和14.9节）。此外，并非所有的浏览器都需要在属性中使用特定的前缀。

14.1　理解厂商前缀 - 图1

图14.1.2　CSS3 Generator既是一种实用的学习工具，同时可以用于减少书写有前缀的和无前缀的CSS属性这种重复的工作

提示　如果属性的语法在定稿之前发生了改变，你可以在CSS中写上多个版本。可以在本章对border-radius和gradient属性的演示中找到有关的示例（分别参见14.4节和14.8节）。每种浏览器只会解释它理解的语法，而忽略其他的语法。

　

提示　尽管对需要包含的有前缀属性的顺序没有要求，但应该总是在最后包含该属性的无前缀版本，以保证未来仍然可用（参见图14.1.1）。这样，即便浏览器未来支持无前缀的属性，也不会产生中断的情况。

　

提示　CSS3 Generator（www.css3generator.com）等服务可以简化创建这类属性的工作，减少输入，节约时间。其他用于生成代码的工具的列表参见www.bruceontheloose.com/tools/。