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 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

ReactNative开发工具有这一篇足矣

ReactNative系列文章: 1.《逻辑性最强的React Native环境搭建与调试》 2.《ReactNative开发工具有这一篇足矣》 正文 Rea...

34013
来自专栏分享达人秀

Android Studio配置优化,打造开发利器

是不是很多同学已经有烦恼出现了?电脑配置已经很高了,但是每次运行Android程序的时候就很卡,而且每次安装运行程序都要等待很长时间,如果是在开发后期需要不...

2379
来自专栏流媒体人生

为sourceinsight添加makefile和configure文件

在用sourceinsight查看ffmpeg源码的时候,大家会发现不能查看源码中的makefile代码,即不能搜索到makefile文件。这是因为sourc...

772
来自专栏工科狗和生物喵

搭建你自己的网站--LAMP架构(Ubuntu 16.04)

笔者目前算是一个WEB方向的踽踽前行的小菜鸟,但是也是现在手上有两台云服务器在手的人了,网站也做了两个了,所以,今天接着昨天的话题,我们来搭建一个自己网站,这样...

4535
来自专栏吾爱乐享

php学习之html标签-超链接属性(四)

1004
来自专栏影子

Xcode导出App一般问题及其解决方法(开发者协议变更及Bundle Id过期问题)

36614
来自专栏帘卷西风的专栏

VS2010/VS2012 设置全局头文件和库路径

        在VS2010之前,设置项目的全局头文件和库路径是非常方便的,直接选择菜单Tools->Options->Projects and Soluti...

832
来自专栏张戈的专栏

DX-Seo与WP-codebox插件冲突解决方法

这两天折腾代码高亮插件,折腾得够呛!缘由要不就是导致网站爆卡,要不就是点击复制按钮出问题。 这里说下 wp-codebox 和 DX-Seo 插件冲突的现象及解...

2679
来自专栏施炯的IoT开发专栏

【OneNote Mobile】 如何Email便签

利用Windows Phone 7手机的OneNote Mobile,用户可以随时以文字、图片或者录音来记录灵感,并通过Windows Live SkyDriv...

1767
来自专栏逸鹏说道

我为NET狂群福利:逆天常用的一些谷歌浏览器插件

逆天书库:http://www.cnblogs.com/dunitian/p/5734677.html 常用工具:http://www.cnblogs.com/...

2295

扫码关注云+社区