浏览器兼容

浏览器兼容思路

• 什么是 CSS hack

由于不同的浏览器，比如IE6,IE7,Firefox等，对CSS的解析标准不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这时我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中得到想要的相同的效果。

这个针对不同的浏览器写不同的CSS的过程，就叫css hack。

borwserhacks

• 谈一谈浏览器兼容的思路

要不要做：
产品的角度（受众，受众浏览器比例，效果优先还是基本功能优先）
成本的角度（有没有必要做）
做到什么程度：
让哪些浏览器支持哪些效果
如何做：
根据兼容需求选择技术框架/库
根据兼容需求选择兼容工具(html5shiv.js,respond.js,css reset,normalize.css)
条件注释，CSS hack，js能力检测做一些修补

• 渐进增强和优雅降级
  渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  优雅降级（graceful degradation）:一开始就构建完整的功能，然后再针对低版本浏览器继续兼容。

浏览器兼容行动

• 浏览器兼容的写法

css hack有3种表现形式：css属性前缀法，选择器前缀法，以及IE条件注释法。大部分是针对IE浏览器不同版本之间的表现差异而引入的。

1. 属性前缀法（类内部hack）：IE6可以识别下划线和星号，IE7可以识别星号，但不能识别下划线,IE6~IE10都识别\9。

.box{
    color: red;
    _color: blue; /*IE 6*/
    *color: green; /*IE 6 7*/
    color: yellow\9; /*IE EDGE 6-8*/
}

2. 选择器前缀法（选择器hack）

3. IE条件注释法

• 常见属性的兼容情况
  inline-block >= ie8
  min-width/min-height >=ie8
  :before,:after >=ie8
  div:hover >=ie7
  inline-block>=ie8
  background-size>=ie9
  圆角>= ie9
  阴影>=ie9
  动画/渐变>=ie10

• 常见兼容处理范例：
  清除浮动写法：

兼容inline-block:

一般兼容性差的先写，做兼容性处理的语句放到后面。

条件注释写法

css hack:

.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9;  /*ie/edge 6-8*/
}

使用浏览器兼容工具：

小于ie9时生效

浏览器兼容工具

• 条件注释(conditional comment)
  是于html源码中被IE有条件解释的语句。可被用来向IE提供及隐藏代码。IE10不再支持

• IE Hack
  指的是IE浏览器漏洞，利用IE Hack，我们可以兼容IE低版本。

• js 能力检测
  检测当前浏览器支持和不支持的特性。如Modernizr.js,它会为浏览器的html标签生成一批的css的class名称，标记当前浏览器支持和不支持的特性。我们利用html标签上的类名，就可以为不同版本的不同浏览器添加兼容样式

• html5shiv.js
  html5shiv.js主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。

• respond.js
  模拟css3的媒体查询，是一种css兼容工具。可在IE6~8（不支持css3）上模拟CSS3 Media Queries

• css reset
  强制重置浏览器默认样式，使其都清零，使得所有页面效果一致。

• normalize.css
  是作为css reset的改良版，没有暴力的把所有浏览器默认样式都去掉，而是保护了有用的默认浏览器样式，一般化了大部分html样式，修复了浏览器自身的bug，优化了css的可用性。

• Modernizr
  是一个js库，用来检查浏览器对于属性的支持，给相应的html加上class便于书写不同浏览器下的兼容性样式。

• postCSS
  它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码.

• 兼容性查询网站
  caniuse查询css属性兼容