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

html-css016

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

HTML5和CSS3是HTML和CSS的最新版本。

HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这种语言，我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。

一、指代不同

1、CSS3：是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。

2、CSS：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

二、内容不同

1、CSS3：主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

2、CSS：不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

三、特点不同

1、CSS3：新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。

2、CSS： 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

参考资料来源：百度百科-CSS

参考资料来源：百度百科-CSS3