Task12浏览器兼容

1、什么是 CSS hack

由于不同厂商的浏览器，比如IE, Safari, Mozilla Firefox, Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。此时，针对不同的浏览器去写不同的CSS，使之能在不同的浏览器中也能得到想要的页面效果，这一过程为CSS hack。

2、谈一谈浏览器兼容的思路

（1）考虑需求（要不要做）

从产品角度，产品的受众、受众浏览器比例、效果优先还是基本功能优先。一般是兼容到IE6、IE8等。
从成本角度，有无必要做。
（2）考虑范围（做到什么程度）
让哪些浏览器支持哪些效果。
（3）具体方法
- 根据兼容需求选择技术框架/库（jquery）；
- 根据兼容需求选择兼容工具；html5shiv.js、respond.js、css reset、normalize.css、Modernizr、 postCSS；
- 条件注释、CSS Hack、js 能力检测做一些修补。
  （4）渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

3、列举5种以上浏览器兼容的写法

（1）选择合适的框架，Bootstrap (>=ie8)、jQuery 1.~ (>=ie6)、jQuery
（2）条件注释，用来向IE提供及隐藏代码。
CSS hack
（3）属性前缀法，IE6能识别下划线_和星号，IE7能识别星号，但不能识别下划线；IE6~IE10都认识\9，但firefox前述三个都不能认识。
!important，表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；
-webkit- ，针对safari，chrome浏览器的内核CSS写法；
-moz-，针对firefox浏览器的内核CSS写法；
-ms-，针对ie内核的CSS写法；
-o-，针对Opera内核的CSS写法。
（4）选择器前缀法
（5）一些和兼容相关的开发工具

Html5shiv.js 让IE9以下的IE浏览器支持html5的一些标签，可以用html5shiv.js来模拟标签。
Respond 媒体查询（css3新特性），有些浏览器不支持媒体查询，可以用respond.js来兼容。
CSS reset 清除、覆盖浏览器的CSS默认属性。
Normalize.css 是CSS reset的改良版，让不同的浏览器在渲染网页元素的时候形式更统一。
Modernizr 可以检测html5和css3的特性。

4、以下工具/名词是做什么的。

条件注释，是html源码中被IE有条件解释的语句，用来向IE提供及隐藏代码。IE9以下支持条件注释，IE10不再支持条件注释。
IE Hack，针对IE浏览器编写不同的CSS让IE能够正常渲染的过程。包括属性前缀法、选择器前缀法以及IE条件注释法。
js能力检测，首先检测浏览器是否支持特定的能力，然后可以给出特定的解决方案。
html5shiv.js，让IE9以下的IE浏览器支持html5的一些标签，可以用html5shiv.js来模拟标签。
respond.js，对于媒体查询（css3新特性），有些浏览器不支持，可以用respond.js来兼容。
CSS reset，清除、覆盖浏览器的CSS默认属性。
normalize.CSS，是CSS reset的改良版，让不同的浏览器在渲染网页元素的时候形式更统一。
modernizr，是一个JavaScript库，可以检测html5和css3的特性。
postCSS，是一个使用JS插件来转换CSS的工具。

5、查询兼容性网站

http://caniuse.com/ 查CSS属性兼容
http://browserhacks.com/ 查Hack的写法