我理解的CSS3及其兼容性问题和处理方式

html-css018

我理解的CSS3及其兼容性问题和处理方式,第1张

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就是它其中的两个插件

CSS hack的写法大致归纳为3种:条件hack、属性级hack、选择符级hack。 (1)条件hack主要针对IE浏览器进行一些特殊的设置 <!--[if<keywords>? IE <version>?]>代码..