05-移动端开发教程-CSS3兼容处理

CSS3的标准并无所有定稿，目前CSS3的标准分红了不一样的模块，具体的标准由各个模块推进标准和定稿，标准制定的过程当中，浏览器也在不断的发新的版原本兼容新的标准。
浏览器有时会给一些在试验阶段或非标准阶段的css属性添加前缀, 这样开发者就可使用 浏览器行为的改变不会破坏标准. 开发人员应等待包含无前缀属性，直到浏览器行为标准化。

1. 主流浏览器引擎前缀

-webkit- (谷歌, Safari, 新版Opera浏览器等)
-moz- (火狐浏览器)
-o- (旧版Opera浏览器等)
-ms- (IE浏览器 和 Edge浏览器)

只有在新的css3的实验性的属性前须要添加前缀，目前大部分经常使用的css3新属性均可以直接舍弃前缀。查看浏览器兼容css3属性状况请参考：caniuse网站

.wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } 

2. vscode插件实现css3前缀的自动化处理

因为添加前缀工做都是否枯燥和没有意义，这些工做能够直接交给开发工具或者第三方的工具来自动化的实现处理。而vscode也有对应的自动化的插件进行自动化的添加代码前缀。

vscode 自动化插件: Autoprefixer，能够自动化的给css、less、sass文件进行自动化的添加css3前缀。

 

使用方法：ctrl + shift + p 而后输入 autoprefixer 选择回车执行命令。

因为此插件是对npm包：Autoprefixer的封装，因此若是使用此插件对css进行预处理须要安装好node和安装上Autoprefixer包。

# 第一步： 安装node  # 第二步：全局安装Autoprefixer插件包 $ npm i -g autoprefixer # 第三步： 用vacode的插件处理css文件（html文件不行）  # 若是npm安装很慢或者老是失败，请设置淘宝的npm包镜像。直接在node安装完了后执行以下命令。而后就能够happy的安装npm的第三方包了。 $ npm config set registry https://registry.npm.taobao.org 

nodejs下载地址：下载
淘宝镜像地址： 地址

3. js辅助脚本解放手写前缀

为了解决手工书写前缀的问题，最先的一个解决方案是由Lea Verou提供的一个-prefix-free脚本。

只须要在.html文件中插入一个prefixfree.js文件（能够是文档任何地方），建议把这个脚本文件放在样式表以后。

添加这个脚本以后，使用CSS3的属性时，只需书写标准样式便可。可是这种作法将全部压力交给了客户端来处理。如此一来页面解析压力就大了，性能会打必定的折扣，而且一旦脚本加载失败，那么就会出现浏览器没法正常渲染CSS3的样式风格。

prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+获得支持。

4. 自动化构建工具

自动化构建工具：webpack、gulp、grunt均可以实现css3属性前缀的自动化添加。在此我只演示一下gulp的应用。

gulp自动化配置和安装演示：

第一步：安装node环境（已安装，略过)
第二步：安装gulp的全局的包(已安装，略过)

$ npm i -g gulp 

第三步：初始化项目的npm配置文件和初始化安装要gulp和gulp的插件的项目本地插件包。

$ npm init -y # 初始化项目的npm配置文件 $ npm i -S gulp # 安装gulp到本地项目（仅开发时使用，S大写） $ npm i -S gulp-autoprefixer # 安装gulp-autoprefixer插件（为css3属性添加前缀） $ npm i -S gulp-rename # gulp的重命名插件 

第四步：在项目根目录下建立一个名为 gulpfile.js 的文件

var gulp = require('gulp'), // 引用gulp autoprefixer = require('gulp-autoprefixer'), // 添加引用前缀的gulp插件 rename = require("gulp-rename"); // 引用重命名的gulp插件 gulp.task('t1', function () { gulp.src('./css/**/*.css') // 设置要处理的原始的文件位置 .pipe(autoprefixer()) .pipe(rename({ suffix: ".min", // 添加后缀 extname: ".css" // 文件扩展名 })) .pipe(gulp.dest('./css/')); // 最终文件输出的位置 }); 

能够根据你的状况修改路径，当前默认是你项目根目录下有个css目录，自动为css目录下面的全部文件自动建立一个*.min.css对应文件，就是最终使用的，这里没有进行压缩，若是须要压缩能够添加gulp的压缩插件。

第五步：接下来在命令终端进入gulpfile.js文件的目录执行

$ gulp t1 

能够在项目中看到新生成的文件了。

gulp 在线文档：地址

5. sass、less等预处理语言

sass和less等css的预处理语言配合响应的编译工具也能够实现对css3中的新属性的自动化加前缀处理。后续文章会有介绍，在此不赘述。

6. 渐进加强和优雅降级

渐进加强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，而后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，而后针对浏览器测试和修复。好比一开始使用 CSS3 的特性构建了一个应用，而后逐步针对各大浏览器进行 hack 使其能够在低版本浏览器上正常浏览。

---

联系老马

对应视频地址：https://qtxh.ke.qq.com/
老马qq： 515154084
老马微信：请扫码

 

扫码加老马微信