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 使其可以在低版本浏览器上正常浏览。


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【前端编程】加载第三方JS的各种姿势

从网站开发者的角度来看,第三方JS相比第一方JS有如下几个不同之处: 下载速度不可控 JS地址域名与网站域名不同 文件内容不可控 不一定有强缓存(Cache-C...

37490
来自专栏西枫里博客

宝塔面板操作多个域名做301跳转

都知道在网站更换域名的过程中为了保住收录和排名,就需要通过搜索引擎提供的改版工具来进行操作。而其中最重要的就是对老域名进行301永久重定向获得搜索引擎的收录更新...

57210
来自专栏老马寒门IT

Node入门教程(7)第五章:node 模块化(下) npm与yarn详解

Node的包管理器 JavaScript缺少包结构的定义,而CommonJS定义了一系列的规范。而NPM的出现则是为了在CommonJS规范的基础上,实现解决包...

37560
来自专栏王小雷

Ubuntu16.04安装后开发环境配置和常用软件安装

Ubuntu16.04安装后1.安装常用软件搜狗输入法+编辑器Atom+浏览器Chome+视频播放器vlc+图像编辑器GIMP Image Editor安装+视...

41350
来自专栏零基础使用Django2.0.1打造在线教育网站

利用Flask搭建微电影视频网站(三):前端首页搭建

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

95810
来自专栏大数据钻研

HTML meta标签总结与属性使用介绍

之前学习前端中,对meta标签的了解仅仅只是这一句。 <metacharset="UTF-8"> 但是打开任意的网站,其head标签内都有一列的meta标签。比...

34660
来自专栏calvin

asp.net core 编译mvc,routing,security源代码进行本地调试

因为各种原因,需要查看asp.net core mvc的源代码来理解运行机制等等,虽说源代码查看已经能很好的理解了。但是能够直接调试还是最直观的。所有就有了本次...

15520
来自专栏码农笔录

手动下载genymotion ova镜像文件,genymotion下载失败、慢解决方案

24540
来自专栏PHP在线

[技巧]丰富的phpstorm编辑器配色方法

1 打开编辑器 phpstorm菜单找到preferences,MAC快捷键[command+,],Editor->Colors&font->font 在此处设...

39150
来自专栏实用工具入门教程

如何部署 MongoDB 集群

MongoDB是一个领先的非关系型数据库管理系统,也是NoSQL运动的重要成员。MongoDB不是使用关系数据库管理系统(RDBMS)的表和固定模式,而是在文档...

47210

扫码关注云+社区

领取腾讯云代金券