了解CSS浏览器前缀

在我们编写CSS代码的时候，经常需要编写各种CSS浏览器前缀（CSS Vendor Prefixes）。但是我们为什么需要使用CSS浏览器前缀，以及什么时候使用CSS浏览器前缀呢？这里将会为大家一一介绍。

这篇文章将围绕以下几点来介绍CSS浏览器前缀：

• 什么是CSS浏览器前缀？
• 我们为什么需要使用CSS浏览器前缀？
• 我们应该如何正确的使用CSS浏览器前缀？
• 哪一些CSS属性需要使用浏览器前缀？

什么是CSS浏览器前缀？

CSS浏览器前缀是与各个浏览器引擎相关的字符串，它们通常放置在CSS属性的前面。它的格式通常为：

'-' + 浏览器前缀 + '-' + CSS属性名称

下面的表格中列出了常用浏览器和它们的相应浏览器前缀标识。

例如，Firefox浏览器在使用CSS3 transform属性时的相应浏览器前缀代码为：

.example {
-moz-transform: value;
}

我们为什么需要使用CSS浏览器前缀？

每当新的CSS属性在被正式添加到W3C标准中之前，各个浏览器厂商都会使用自己的方法来测试和实现这些新的属性。

例如，当背景渐变属性被推出的时候，不同的浏览器厂商使用不同的方法来实现相同的效果。要创建一个简单的黑白渐变效果，我们需要编写以下一些代码：

.example {
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #fff));

/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #000 0%, #fff 100%);

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #000 0%, #fff 100%);

/* IE 6 - 9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );

/* IE 10+ */
background: -ms-linear-gradient(top, #000 0%, #fff 100%);

/* Opera 11.10+ */
background: -o-linear-gradient(top, #000 0%, #fff 100%);
}

为了使测试阶段的各个浏览器之间有不同的实现，CSS2.1中规定了一套供应商前缀的策 略（ vendor-prefixing policy）。每一个浏览器引擎都允许有自己的前缀，通过前缀和属性名称相结合，来实现各自浏览器的特定CSS属性的效果。各个浏览器在解析CSS代码 时只会接受带自己浏览器前缀的代码，其它浏览器前缀的代码会被忽略。

当一个新的CSS属性成为了正式的W3C标准的时候，我们就可以不使用浏览器前缀了。在这个阶段，不带浏览器前缀的CSS属性在各个浏览器中的显示效果应该是一致的。

.example {
background: linear-gradient(top, #000 0%, #fff 100%);
}

虽然编写大量的CSS浏览器前缀代码十分的麻烦，但是我们可以在某个CSS属性成为W3C标准之前就在各个浏览器上测试和使用它们。
我们应该如何正确的使用CSS浏览器前缀？

正确的使用CSS浏览器前缀的方法是将浏览器前缀放置在CSS属性名称之前。例如：

.example {
-webkit-animation-name: slidein;
-o-animation-name: slidein;
-ms-animation-name: slidein;
-moz-animation-name: slidein;
animation-name: slidein;
}

我们这样做是为了利用CSS级联的特性，浏览器会使用最后一个它们能解析的属性。将不带CSS浏览器前缀的属性放置在最后面，可以在该属性成为W3C标准的时候，所有的浏览器都使用它来解析这个CSS属性。
哪一些CSS属性需要使用浏览器前缀？

需要使用浏览器前缀的CSS属性是经常发生变动的，你可以通过W3C的properties页面来查看有哪些已经成为标准的CSS属性。如果在这里找不到某个CSS属性，那么就说明该属性还在测试阶段，也许在不久的将来会成为W3C的标准，那么在使用这个属性的时候就需要为它添加CSS浏览器前缀。

以上的说法并不是绝对的，某些CSS属性可能不在此列之中。例如border-radius属性，在W3C的标准CSS属性中并没有它，但是所有的现代浏览器都支持不带浏览器前缀的border-radius属性，只有极少数版本的webkit和Firefox浏览器使用该属性需要带浏览器前缀，Opera 和IE则不需要带浏览器前缀。

下面列表中的所有CSS属性都需要添加CSS浏览器前缀。它的界面类似下图的样子：

转载请注明：TUTERM.COM » 了解CSS浏览器前缀