什么是 CSS 预处理器 与 后处理器

html-css015

什么是 CSS 预处理器 与 后处理器,第1张

预处理器就是编译css,以前css都是静态的,要写两个class就得写两个class,现在可以加入变量。预处理器会对变量做处理。

后处理器就是对css加入一些扩展,增强css的兼容性。

CSS(Cascading Style Sheets )叫层叠样式表,用于修饰HTML文档样式;CSS3是CSS2的升级版本,由CSS权威组织在css2的基础之上新增了很多功能和标准,让各大浏览器厂商去实现。但是由于各浏览器出于各种原因,导致对各个功能的实现的时间是参差不齐的,这就导致有些浏览器先实现,有些浏览器后实现,甚至有些浏览器没实现;先实现的浏览器将已经实现的功能做个特殊的标记,表示这个功能是我的私有属性,其他浏览器用不了;而接着如果第二个浏览器也实现了这个功能,它也加一个自己的特殊标记,以此类推,到最后面所有浏览器厂商都实现了该功能。这个时候某个浏览器厂商的人可能就想到,这个功能大家都实现了那这也不算是我的私有属性了,那我就支持不加自己特殊标记的写法吧,接着第二个厂商看到,哟呵是哦大家都实现了,那我也支持不加自己特殊标记的写法,以此类推,到最后大家都支持不加自己特殊标记的写法了,这就是一个属性从开始定义到兼容一些浏览器到兼容所有浏览器的过程。这个过程,甚至到现在很多属性和功能都是在上述的发展着。

所以正是浏览器厂商对CSS3新增功能的实现时间参差不齐,导致了CSS3属性各种各样不兼容的问题。

那如何解决兼容性紊乱的问题呢?

方法一:查文档查手册

下面是两个最常用的两个网址caniuse和CSS手册:

当我们要用某个属性的时候,就去上面两个网址查找该属性的兼容性,对应你要兼容到的浏览器版本,对应的加上前缀之类的操作,如columns:

小结一下,各主流浏览器常加的特殊标记:

1. Safari/Chrome: -webkit-

2. IE:-ms-

3. Firefox:-moz-

4. Opera:-o-

方法二:使用后处理器比如autoprefixer插件自动补齐前缀

这里简单讲一下后处理器和预处理器

注意:cssNext和autoprefixer依赖于postCss

postCss的本质是用js实现的CSS的抽象语法树(AST : Abustract Syntax Tree)

说白了postCss就像一个插槽一样,剩下的具体事情留个其他插件来做了,cssNext和autoprefixer就是它其中的两个插件