浏览器兼容
2017-07-28 本文已影响0人
白柏更好
CSS hack
由于各种浏览器厂商的之间或不同版本的浏览器存在差异，它们各自对css的解析认识也存在差异，由此可能导致生成的页面效果会不一样，不能达到我们统一页面效果的需求。所以需要对不同浏览器写不同的css以达到我们的需求。其表现形式大概有以下三种：
- css属性前缀法（类内部Hack）:IE6可以识别 _ 和 * ，IE7能识别 * ，IE6~10都识别 \9 ，Firefox三个都不认识。
- 选择器前缀法
- IE条件注释法（HTML条件注释Hack）:是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。IE10不再支持条件注释。
浏览器兼容的思路
- 首先需要根据产品的角度来看（产品的受众人群，受众的浏览器比例，选择效果优先还是功能优先）
- 再其次考虑成本的问题
- 需要哪些浏览器支持哪些效果呢？
- 根据兼容需求选择框架、库
Bootstrap(IE8及以上支持)
JQuery1.（IE6及以上支持），JQuery2.（IE9及以上支持）
VUE（IE9及以上支持） - 根据兼容性适当选择所需的兼容工具
- post css
- 条件注释、CSS Hack、js能力检测做一些修补
- 渐进增强：对于低版本浏览器构建页面，先保证最基本的功能，在针对高级浏览器进行效果、交互改进或追加功能达到更好地用户体验
- 优雅降级：从最初就开始构建完整的功能，在针对低版本浏览器进行兼容
举例浏览器兼容的写法
- 清除浮动
image.png
- css属性级Hack
image.png
常见工具或名词解释
- 条件注释
是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。IE10不再支持条件注释。 - IE Hack
使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，有CSS属性前缀法、选择器前缀法以及IE条件注释法 - js 能力检测
最常用的也是最广泛使用的客户端检测技术是能力检测（特性检测）。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。 -
html5shiv.js
可以在旧版Internet Explorer中使用HTML5部分元素，并为Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5样式。 -
respond.js
提供一个快速和轻量级（3kb最小化/ 1kb gzipped）脚本，以在不支持CSS3媒体查询的浏览器中启用响应式网页设计，特别是Internet Explorer 8及以下。它以这样的方式编写，它可能会补丁支持其他不支持的浏览器。 -
css reset
浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题。其目的是将浏览器的自带样式重置，易于保持各浏览器渲染的一致性。 -
normalize.css
代替css重置，其理念是尽量保持浏览器的默认样式，不进行太多的重置。参考 -
Modernizr
Modernizr是一套JavaScrip库，用来侦测浏览器是否支持HTML与CSS3等规格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。参考 -
postCSS
是用JS转换样式的工具。这些插件可以使您的CSS，支持变量和混合，透明未来的CSS语法，内联图像等。
属性兼容性查询
