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文件不行)

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

第三步:在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp'); 
var autoprefix = require('gulp-autoprefixer');

gulp.task('styles', function() {
  gulp.src(['./src/css/*.css'])
    .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest('./bulid/css'));
});

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

gulp styles

可以在项目中看到新生成的文件了。

gulp 在线文档:地址

5. sass、less等预处理语言

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

6. 渐进增强和优雅降级

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

优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SpringBoot 核心技术

第五十章:SpringBoot2.0新特性 - 岂止至今最简单redis缓存集成

1453
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用③TodoList中)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3184
来自专栏月牙寂

k8s源码分析-----kubelet(4)imageManager

第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

3587
来自专栏编程一生

Redis和消息队列使用实战

1373
来自专栏机器学习和数学

[编程经验] Elasticsearch 初识

Elasticsearch 中文网站: https://www.elastic.co/cn/ 官网对Elasticsearch 介绍的第一句话: Elastic...

2916
来自专栏云计算

腾讯云支持 Terraform 开发实践

这篇文章从系统架构开始,到核心库讲解,到实践开发,再到单元测试,比较完整的描述了支持Terraform的开发全过程。

2.7K16
来自专栏Java技术栈

分布式作业 Elastic-Job 快速上手指南,从理论到实战一文搞定!

1662
来自专栏DT乱“码”

Java知识图谱收集整理

1、Java学习路径1 ? 2、Java学习路径2 ? 3、Java Web学习路径 ? 4、Java编程所需的工具及知识 ? 5、Java集合类 ? 6、Ja...

2239
来自专栏全沾开发(huā)

浅谈script标签中的async和defer

浅谈script标签中的async和defer script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了。 直接...

3316
来自专栏恰同学骚年

Hadoop学习笔记—16.Pig框架学习

  Pig是一个基于Hadoop的大规模数据分析平台,它提供的SQL-LIKE语言叫Pig Latin,该语言的编译器会把类SQL的数据分析请求转换为一系列经过...

582

扫码关注云+社区