彩云Sky

ui设计,交互设计,用户体验,前端工程师

微信公众号:彩云译设计(caiyunyisheji)

怎样方便的处理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

基础知识聊完。下面讲解决方案:

1、使用sublime编辑器

2、安装插件Autoprefixer

3、写好css代码后,按com+shift+p调取插件,选择Autoprefixer

使用方法:在使用时直接按com+shift+p调取“Autoprefix CSS”,并且回车,则可以直接得到带前缀的css3代码。

参考文章:http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html

评论

© 彩云Sky | Powered by LOFTER