浏览器兼容

什么是CSS hack？

不同浏览器，或者相同浏览器的不同版本，对CSS的解析可能不同，导致页面展现效果不一致。为了达到预期的展现效果，我们需要对不同浏览器的某些样式写不同的CSS。
CSS hack 的三种常见方法

• 条件注释。
  主要针对的是IE浏览器，因为IE浏览器（x-9）可以“读懂”注释里面的一些暗语，通过条件限制，就可以选择在什么样的情况下，读取不一样的CSS。（IE10不支持)

• 选择器前缀。
  通过浏览器的某些版本的一些BUG，可以识别CSS非标准写法。据此，我们可以对导致不兼容的css 写法进行重写，就可以覆盖前面的展现效果。

• 属性前缀
  同浏览器前缀， IE6 可以识别" _ "和“ * ”，IE7 可以识别 “ * ”，IE6-10可以识别 “\9” 。

谈一谈浏览器兼容的思路。

1. 要不要去兼容？

首先，需要知道产品定位是什么，针对什么样的人群？必须针对所有用户，还是只是针对特定人群？是否有无必要为了少部分人群来增加成本？

2. 兼容到什么程度？

必须展现与最新浏览器展现一样的效果？还是说只兼顾到部分效果？还是最低层次的满足基本使用功能，不出现排版混乱？

3. 用什么样的方式去兼容？

渐进增强？还是优雅降级？

4. 选择合适的库及工具，实现兼容

选择好整体方法及思路以后，就可以选择合适的库，针对不同的问题，采取不同的方法来处理兼容性问题了。

列出5种以上浏览器兼容的写法。

1. 条件注释。

adfad
//如果是IE6 就会有

####
//如果不是IE 

常见的有
[if !IE]//如果不是IE.
[if lt IE 5.5]//如果小于IE5.5版本
[if lte IE 6]//如果小于等于IE 6版本
[if gt IE 7]//如果大于IE 7版本
[if gte IE 8]//若果大于等于IE 8版本
[if (IE 6)|(IE 7)]//如果是IE 6 或者 IE 7

2. 属性前缀
   .box {
   color:red;
   color:pink\9;
   *color:blue;
   _color:yellow;
   }
   ie 6 黄色，IE 7蓝色，IE8-10粉色，其他红色。

-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法

3. 选择器前缀

*.clear {}只有IE6和IE7可以识别这个选择器。

常见的属性兼容性

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

• 条件注释
  CSS hack的一种方式，处理IE10以下的兼容性问题的一种方法。

• IE hack
  针对IE浏览器，写不同的CSS ，让IE浏览器展现开发人员想要的页面。

• js 能力检测
  浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。

• html5shiv.js
  用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。

• respond.js
  用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。

• css reset
  将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

• normalize.css
  Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
  它可以：
  保留有用的默认值，不同于许多 CSS reset 的简单粗暴。
  标准化的样式，适用范围广的元素。
  纠正错误和常见的浏览器的不一致性。
  一些细微的改进，提高了易用性。
  使用详细的注释来解释代码。

• Modernizr
  Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

• postCSS
  它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码。

查询属性兼容性

caniuse.com 兼容性查询
browserhacks.com hack写法