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

最新推荐文章于 2020-07-25 20:21:11 发布

derfyfxh588690

最新推荐文章于 2020-07-25 20:21:11 发布

阅读量142

点赞数

文章标签：开发工具 webpack ViewUI

原文链接：http://www.cnblogs.com/fly_dragon/p/8428744.html

版权

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/')); // 最终文件输出的位置 });