浏览器兼容性相关

CSS Hack

• 不同的浏览器对CSS的解析认识不完全一样，因此会造成页面效果有差异。这时候我们需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中得到我们想要的页面效果。
• CSS Hack就是运用一些小技巧，利用不同浏览器的特性（或者BUG）来使我们的代码兼容不同的浏览器。
  比如：IE6能识别下划线“_”和星号“”； `
  IE7能识别星号“”但不能识别下划线；
  IE6到10都能识别“\9”，但firefox三个都不能识别。
• CSS Hack大致有三中表现形式
  • 属性前缀法
  • 选择器前缀法（即选择器hack）
  • IE条件注释法（即HTML条件注释hack）

浏览器兼容的思路

1. 什么是浏览器兼容问题

• 同一份代码不同的浏览器解析的页面效果不一样，有的正常有的不正常。

2. 处理兼容问题的思路

• 有没有必要做兼容（产品角度和成本角度）。
• 要做到什么程度，要让那些浏览器支持哪些效果。
• 思考怎么做：
  1). 使用什么框架/库（jQuery）
  2). 选择什么兼容工具（html5shiv.js,respond.js,normalize.css等）。
  3). postCSS
  4). 使用条件注释，CSS Hack，JS能力检测做一些修补。

5种浏览器兼容写法

1. 条件解释

2. 属性前缀法
   • IE6到10能识别：“\9"（后缀）。
   • IE67能识别：”*”
   • IE6能识别：“_"
3. 选择器前缀法

*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有效

4. !important
   表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级
5. -webkit-,-moz-,-ms-,-o-等针对不同浏览器内核的css写法

.example{
    -moz-font-size: 20px;
}

相关的工具和名词汇总

1. 条件注释
   是于HTML源码中被IE有条件解释的语句，可被用来向IE提供或隐藏代码。(IE10开始不再支持)
2. IE Hack
   使用特殊符号或者方法写出只有IE浏览器可以解析的代码，主要有CSS属性前缀法，选择器前缀法以及IE条件注释法。
3. js 能力检测
   使用JS的语法检测浏览器支持的属性，以便展示效果。
4. html5shiv.js
   用于解决IE9以下版本浏览器对HTML5新增标签不支持的问题。
5. respond.js
   让不支持CSS3 Media Query（媒体查询）的浏览器支持查询。
6. css reset
   通过重新定义标签样式，覆盖浏览器自带的默认CSS属性。
7. normalize.css
   Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
8. Modernizr
   Modernizr是一个JavaScript 库，用来侦测浏览器是否支持HTML5与CSS3的特性。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。
9. postCSS
   PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

属性兼容性查询

• caniuse.com查询CSS兼容性