浏览器兼容
什么是 CSS hack
-
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
简单说就是先根据各种浏览器的bug去识别该浏览器，再对于该浏览器加样式进行弥补，从而使css代码兼容多种浏览器，在多种浏览器上都可以正常显示。
实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。 -
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法、以及IE条件注释法（即HTML头部引用if IE）。
-
属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
box{
color: red; /*firefox 或 chrome 浏览器下是红色*/
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie6~ie10*/
}
-
选择器前缀法(即选择器Hack)
*html {property:value;} IE6 *+html {property:value;} IE7 -
IE条件注释法(即HTML条件注释Hack)：详见下面条件注释
谈一谈浏览器兼容的思路
- 要不要做：
- 产品的角度： 调查产品的受众，产品受众的浏览器比例。浏览器市场份额。效果优先还是基本功能优先。这里就有一个渐进增强和优雅降级的概念。
- 渐进增强
(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 - 优雅降级(graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
stackoverflow-渐进增强和优雅降级的区别
- 渐进增强
- 成本的角度：有无必要实现一些效果。因为一些效果在新的浏览器中实现和IE67中实现所需要的成本有很大的不同。
-
做到什么程度：
兼容到哪个最低版本的浏览器。是IE8还是要包括IE67。 -
如何做：
- 根据兼容需求选择技术框架/库(jquery)。如果需要兼容IE67，我们可以使用jQuery低一些的版本去兼容js。
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)。
- postCSS。
- 条件注释、CSS Hack、js 能力检测做一些修补。
- 用得到的网站： http://browserhacks.com/
列举5种以上浏览器兼容的写法
- 清除浮动
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
-
inline-block的ie67兼容
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- 使用
respond.js和html5shiv.js
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
- 使用条件注释
<!DOCTYPE html><!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]--><!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]--><!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]--><!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]--><!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
- 使用 Autoprefixer 生成主流浏览器前缀。
http://autoprefixer.github.io/
以下工具/名词是做什么的
- 条件注释
是HTML源码中被 IE5到 IE9 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!–除IE外都可识别（IE10版本以上也可以识别）–>
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!–仅IE6可识别–>
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
<!–仅IE8可识别–>
<!--[if lt IE 6]>
<![endif] -->
<!–IE6以下版本可识别–>
<!-- [if lte IE 8]>
<![endif] -->
<!–IE8以及IE8以下版本可识别–>
<!-- [if gt IE 7]>
<![endif] -->
<!–IE7以上版本可识别–>
<!--[if gte IE 6]>
<![endif]-->
<!–IE6以及IE6以上版本可识别–>
<!--[if (IE 6)|(IE 7)]>
<![endif]-->
<!–IE6或者IE7版本可识别–>
-
IE Hack
针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程 -
js 能力检测
能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
一篇文章 -
html5shiv.js
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> -
respond.js
让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持媒体查询。
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> -
css reset, normalize.css
css reset 和 normalize.css 都是用来使浏览器呈现一致的样式效果诞生的工具。css reset 更激进一些，先将所有浏览器的默认样式删除再添加样式。normalize.css 是更温和的解决办法。是目前主流的选择。
关于css reset 和 normalize.css 的文章 -
Modernizr
Modernizr是一个js脚本来帮助探测浏览器是否支持某种新特性，甚至可以加载额外的script脚本。
官网
一篇文章 -
postCSS
通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码
autoprefixer github
