10.2.3 浏览器私有前缀

CSS3 规范从启动到成为W3C 的推荐标准，一般要经历数年。在W3C 开发标准的过程中，浏览器通常会提前实现这些特性。

浏览器厂商通常都是在属性名称前添加厂商的私有前缀，来测试这些尚未成为标准的特性。因此，可以借助私有前缀，来解决浏览器对CSS3的兼容性问题。

不同的内核都有各自的私有前缀，三大主流内核的私有前缀见表 10‑2：

如，对border-radius属性，用它来指定元素的圆角，很多厂商就使用了私有前缀。而一旦标准充分成熟，浏览器厂商就会移除前缀，直接支持border-radius。代码如下：

.round10  {
    -ms-border-radius: 10px;      /* Miscrosoft (Internet Explorer) */
    -moz-border-radius: 10px;     /* Mozilla(如Firefox) */
    -webkit-border-radius: 10px;  /* Webkit(如Chrome 、Opera、Safari) */
    border-radius: 10px;          /* W3C */
}

使用私有前缀时，如果私有特性和最后的标准特性不一致，就会出现兼容问题。因此，需要把浏览器的私有属性写在前面，把标准属性写在最后面，来确保在特性被完全支持时，能得到正确的效果。

列出每一种私有前缀是最理想的做法，但实际开发中，很少有人这样做。最好的作法是，在编写规则之前，检查哪些浏览器支持该特性，仅列出不支持该特性的私有前缀。如：

.round10  {
    -ms-border-radius: 10px;     /* Miscrosoft (Internet Explorer) */
    border-radius: 10px;         /* W3C */
}

这样写会覆盖使用Webkit和Gecko内核，以及已经完全实现了该规则的任何浏览器，代码不会那么臃肿了，阅读起来也更方便了。更重要的是，可以大大减轻后期维护的负担。