处理不同浏览器之间的 CSS3 差异

尖端技术从来都不是没有代价的。有时这意味着新兴标准只能得到有限的浏览器支持，而当那些标准的草案改变的时候，也意味着你必须回去把你的代码重写一次。当这些同样的问题遇上仍在进行中的CSS 3规范的时候，就不仅是浏览器支持 非常少的问题了，而是大部分浏览器都有实现他们特定的前缀。这些前缀是非常复杂的事情，如果你需要把这些东西用在你的代码里的等方面，你通过需要更多的工作，而且——他们通常都是有目的的。

打个比方，如果你想用到CSS3中的圆角新特性，你应该使用 border-radius 义他们。但是因为这个特性仍然还没有最终定稿，所以浏览器们只支持他们对应的自己实现的版本。所以 -moz-border-radius 就对应于Mozilla Firefox， 而 -webkit-border-radius 则相对应于Safari和Chrome了。 对于Opera呢？也有自己的版本：-o-border-radius。

特有的前缀都不会验证，这不太理想。对于CSS验证器来说，对浮动环绕的效果而使用了特定的前缀的时候，则应该提出一个建议而不是一个错误。无论如 何，如果你想在你的CSS代码中使用绝对的标准的话，你都应该远离这些特定的前缀。

不过，如果你想玩玩CSS3这个新玩具的话，你就会了解为什么这些特定前缀有很好的理由存在，而为什么你在现阶段也会使用到这些来体验到目前的 CSS3规范的。

让我们继续停留在这个圆角效果的例子上，设想一下假如你只想应用到一个对象的一个角上会产生什么情况。CSS3规范还在继续变化时，Webkit项 目决定使用 –webkit-border-top-right-radius时，Mozilla却使用了 –moz-border-radius-topright。没有这些前缀的话，你将要处理两条不同的CSS规则，而且其中一条是绝对会被永远废弃掉的，但 是仍然有可能会有旧版本的浏览器会使用到。

从纯粹的技术上来说，这两个前缀都是“错误的”，这是好事。将来，最终的规范一定会发布，而只有一种规则会被标准化，那时候所有的浏览器都会实现这 一标准。在这一点上，你可以简单地在你的代码中将特定的前缀删除掉就行了。这些特定的前缀好处就体现出来了，它使得这些代码很容易被找到和删除。

有一件你绝对就应该做的事情就是只针对一个浏览器的前缀。苹果的HTML5展示最近被大家关注，只支 持Safari，而不支持其它实现了HTML5的浏览器[虽然，你可以不 使用Safari 5查看苹果的HTML5演示]，而同时Google也 发布了HTML5展示站点：HTML5Rocks[HTML5在同为使用Webkit内核的Safari和Chrome上支持不同]，这些都证明 了只为一种浏览器做优化不是一个好主意，甚至有人认为HTML5是应用程序 设计中的新冒险。

如果你必须要使用特定的前缀这个非标准化的行为让你感到不安的话，你还有一个办法。那就是使用Javascript来自动完成它。

开发人员阿龙.古斯塔夫森写了一篇“列表的关键文 章”，他在文章里嘲笑了这些特定的前缀并且提供了一段Javascript的替代方案给和他感觉一样的人们。

古斯塔夫森把这些特定的前缀叫做CSS的分支。虽然我们基本上同意他的观点，但是这个“分支”这个词是有问题的，因为分支代码没有任何错误，事实上 这是开源世界中的规范（你在使用Git或者是Mercurial吗？）。而且这些特定前缀并不是分支，它们是在标准化还没有完成的时候推动网络进步的临时 的解决办法。

抛开那些术语之后，古斯塔夫森的观点是有效的——忽略标准和使你的CSS代码只工作在特定的浏览器中的做法两个都是糟糕的主意。

古斯塔夫森的这个小小的Javascript库可以帮助你避免将特定的前缀写进你的CSS中。但是令人印象深刻的是，这个脚本确实做到了与将前缀写 进CSS文件中的一样的效果。这个方法有些缺点——会延长加载时间，而且对于那些禁用了Javascrpt脚本的用户来说，也是无效的。

如果你现在就开始使用CSS3的特性，你将无法避免使用特定的前缀，但是至少，你可以选择如何处理他们。例如：直接在样式表中使用这些前缀、将这些 特定前缀的样式写到单独的分离的文件中或者是使用古斯塔夫森提供的这种类似的脚本来解决它。

供稿：SafariX — Safari中文博客，分享Safari资讯、技巧和扩展。
中文出处：
英文出处：