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
老马微信：请扫码

 

扫码加老马微信