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
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 使其可以在低版本浏览器上正常浏览。
- Mybatis - 动态sql
- git版本回退, github版本回退
- Mybatis高级查询之关联查询
- Mybatis-update - 数据库死锁 - 获取数据库连接池等待
- 使用Apache Server 的ab进行web请求压力测试
- Spring-AOP实践 - 统计访问时间
- mysql创建定时执行存储过程任务
- MongoDB-基础-limit-skip-sort
- MongoDB-基础-条件操作符
- mongodb-基础-update-remove
- Mybatis-mapper-xml-基础
- 2016.06 第一周 群问题分享
- MongoDB - basic
- spring boot启用tomcat ssl
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- oc工程中oc、swift混编代码打包成静态framework踩坑笔记
- alloc 和 init都做了什么验证。
- 回顾冒泡排序(新增优化代码)
- 计算输入的一句英文语句中单词数
- 《剑指offer》第21天:合并两个有序链表
- 单细胞转录组基础分析六:伪时间分析
- 使用PaintCode便捷地实现动画效果
- 用墨卡托和GPS坐标计算距离时误差测试
- 单细胞转录组基础分析五:细胞再聚类
- Semaphore回顾
- iOS13 关闭黑暗模式+状态栏显示问题解决方法
- 0807-6.2.0-CDSW中Session列表和team分析
- 单细胞转录组基础分析八:可视化工具总结
- 单细胞转录组基础分析七:差异基因富集分析
- 定位权限请求时易犯的错误小结