为什么会出现CSS前缀?

广州vi设计公司 htt

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

CSS3的前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。 浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。

前缀浏览器内核
-ms-IE浏览器Trident内核
-moz-FirefoxGecko内核
-o-OperaPresto内核
-webkit-Chrome和SafariWebkit内核

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

.box {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}

如果只写移动端的话就加-webkit-前缀和css3属性就可以 。

CSS3前缀+标准代码的顺序

既然CSS3代码中(暂时)需要写上这么多前缀,那么他们的顺序是如何的呢?是先写私有的CSS3属性,再写标准的CSS3属性。

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/


-moz-transform:rotate(-3deg); /*为Firefox*/


-ms-transform:rotate(-3deg); /*为IE*/


-o-transform:rotate(-3deg); /*为Opera*/


transform:rotate(-3deg); /*为nothing*/

广州vi设计公司 http://www.maiqicn.com 我的007办公资源网 https://www.wode007.com

需要说明的是:一旦官方宣布支持这个CSS样式了,就可以去掉前缀,被所有的主流浏览器使用了,比如border-radius,现在不加前缀也可以使用

p://www.maiqicn.com 我的007办公资源网 https://www.wode007