浏览器兼容

CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack

浏览器兼容思路

• 要不要做

• 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）

• 成本的角度（有无必要做某件事）

• 做到什么程度

• 让哪些浏览器支持哪些效果

• 如何做

• 根据兼容需求选择技术框架/库（jquery）

• 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)

• postCSS

• 条件注释、CSS Hack、js能力检测做一些修补

• 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

• 优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

浏览器兼容的写法

兼容性写法参考 browserhacks

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
　　
CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。

条件注释法 这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。
只有IE8及IE8以下的浏览器才会显示中间的script代码
<!--[if lte IE 8]>
<script> ~~~~~</script>
<![endif]-->

只在IE8上不生效
<!--[if ! IE8]>
这段文字在非IE8浏览器显示
<![endif]-->

在非IE浏览器上生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->


属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
.demo{
color: red\0;       IE8 9 10 生效
}
.demo2{
color: pink\9\0;     IE9 10 生效
}
说明：在标准模式中
“_″是IE6专有的hack   _color: red;
*background-color:black; /* IE6, IE7 */ 
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
现在不用管IE 6 7了

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器， 在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

有关CSS hack 不错的博客

• 条件注释
  于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码；使用了条件注释的页面在IE9中可正常工作，但在IE10中无法正常工作，IE10不再支持条件注释
• IE Hack
  针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
• js 能力检测
  浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测
• html5shiv.js
  解决IE(IE6/IE7/IE8)不识别HTML5标签 并导致CSS不起作用问题
• respond.js
  Respond.js是一个快速、轻量的脚本（3kb minified / 1kb gzipped），它的目标是使得那些不支持CSS3 Media Queryes特性的浏览器能够支持响应性设计，尤其是小于等于8的ie浏览器。它是用这样的方式，尽可能的修补那些不支持的浏览器来支持
• css reset
  什么是CSS Reset。HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。解决方法是一开始就通过重新定义标签样式，“覆盖”浏览器的CSS默认属性。
• normalize.css
  Normalize.css 是一个可以定制的CSS文件，为HTML5准备的reset.css的替代品。它可以使元素的渲染在多个浏览器下都能保持一致并且符合规范。它所瞄准的，也都是些需要规范化的样式。
  css reset和normalize.css的区别
• Modernizr
  Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案；Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名
• postCSS
  PostCSS 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。
  PostCSS 可以将 CSS 转变成 JavaScript 可以操作的数据格式。基于 JS 写的插件可以完成上面所说的那些操作。PostCSS 本身不会对 CSS 代码作任何修改，她只是为插件提供了一些接口，方便插件完成它们各自的功能
  postCSS

通常在 can i use 上查询兼容性