html中怎么消除排序的前缀,如何处理CSS3属性前缀

今天闲来无聊，重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说：

为什么还要用mixin呢？为什么不使用Autoprefixer？使用Autoprefixer，只需要输入一行代码，编译器帮你做了一切，还纠结个毛mixin。

姐姐的一句话让我汗颜，我还在思考着如何让Sass来写Gradient，或者类似这样需要带前缀的CSS3属性。也这样让我在思考，那么有了Autoprefixer这样的后处理，Sass中有关于CSS3的mixins是不是已失去了他存在的意义。带着这样的为什么？我们一起来开启今天有关于CSS3前缀的探讨。

CSS3的属性为什么要带前缀

使用过CSS3属性的同学都知道，CSS3属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。这是为什么呢？

我的理解是，浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法还存在波动时，它们提供针对浏览器的前缀。现在主要流行的浏览器内核主要有：

Trident内核：主要代表为IE浏览器

Gecko内核：主要代表为Firefox

Presto内核：主要代表为Opera

Webkit内核：产要代表为Chrome和Safari

而这些不同内核的浏览器，CSS3属性(部分需要添加前缀的属性)对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：

Trident内核：前缀为-ms

Gecko内核：前缀为-moz

Presto内核：前缀为-o

Webkit内核：前缀为-webkit

来看一个简单的示例，早期写一个圆角border-radius，需要这样写：

.box {

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

}

这样编写代码，无形之中给前端人员增加了不少工作量，于是开始有人在讨论这个问题“如何在编写CSS时不需要添加浏览器的私有前缀，又能让浏览器识别？”

-prefix-free

为了解决手工书写前缀的问题，最早的一个解决方案是由Lea Verou提供的一个-prefix-free脚本。你只需要在你的.html文件中插入一个prefixfree.js文件(可以是文档任何地方)，建议把这个脚本文件放在样式表之后。

添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。但是这种做法将所有压力交给了客户端来处理。如此一来页面解析压力就大了，性能会打一定的折扣，并且一旦脚