任务十二-浏览器兼容

1.什么是 CSS hack？

因为浏览器厂家的不同，例如常见的IE浏览器，Safari，谷歌浏览器，火狐浏览器等等，使用内核的不同，或者是同一品牌版本的不同（例如IE6,7,8），造成对CSS解析千差万别，严重影响显示效果。我们开发人员为了弥补这些缺憾实现前台页面显示一致，在不同浏览器中调整相应的css写法，这种行为被称为 CSS hack。

简单点儿说就是，利用各浏览器的特殊特点，编写相应的样式，实现各浏览器前台显示一致。

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

• 产品角度
  产品的受众人群，如果是国家党政机关，那么华丽效果，样式先放一边，首先兼容低版本浏览器，实现功能为第一位的。
  如果是相对前卫，受众群体较为年轻的，那么一般用户使用浏览器的版本较高，可以效果功能兼顾
• 成本角度
  费力做出的兼容到底有没有必要，值不值得，考虑成本，在决定
• 如何做（框架的选取）
  1. 要用bootstrap那浏览器最低要IE8
  2. 用jquery的话 要兼容大部分浏览器的话那么就要用1.X.X的版本，2开头的版本最少也要IE9
  3. 用vue同样最少也要IE9
     （注：根据产品兼容需求选择兼容工具包括：比如html5shiv.js、respond.js、modernizr.js）
  4. 方式思路
     • 渐进增强-对于兼容困难户，就只维持正常功能的实现就可以了，针对其他浏览器，可以进行相应更优秀的改动。
     • 优雅降级-先构建完整功能页面，然后根据不同版本进行兼容。

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

  color:red;    ⁄* 所有浏览器都支持 *⁄ 
  color:red !important;   ⁄* Firefox、IE7支持 *⁄
  _color:red;   ⁄* IE6支持 *⁄
  *color:red;   ⁄* IE6、IE7支持 *⁄
 *+color:red;   ⁄* IE7支持 *⁄
 color:red \9;   ⁄* IE6、IE7、IE8支持 *⁄
 color:red \0;   ⁄* IE8支持 *⁄

 * ， ie6,ie7可以识别；
_和- ， ie6可以识别；
!important ,表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；
-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法

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

• 条件注释
  条件注释 是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。 条件注释最初于微软的 Internet Explorer 5浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于IE10停止支持。
  写法示例

- IE Hack
针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
- js 能力检测
js 能力检测浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
- html5shiv.js
为IE6-8通过使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）。
利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。
考虑到IE9是支持html5的，所以直接在HTML页面的head标签中添加脚本引用即可。
- respond.js
为 IE6-8 以及其它不支持 CSS3 Media Querie 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）`
- css reset
在早期对个浏览器默认css样式的归零方法，后期因为这种方法过于暴力，现在已经很少用了
- normalize.css
有选择的重置部分默认的css属性，对开发者有力的默认属性不会被重置，对开发者不利的属性才会被干掉，比reset.css更加先进。
- Modernizr
Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的 特性——比如audio、video、本地储存、和新的 标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的 fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。
- postCSS
它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码

### 5. 一般在哪个网站查询属性兼容性？
[http://caniuse.com/](http://caniuse.com/)