task12

1. 什么是 CSS hack

由于不同厂商的浏览器，比如IE, Safari, Mozila Firefox, Chrome等，或者是同一厂商的浏览器的不同版本，如IE 6, IE 10，对于CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。写出针对不同浏览器的CSS code就称为CSS hack。让它能在不同的浏览器中也能得到我们想要的页面效果. CSS hack大致有三种表现形式，CSS属性前缀法，选择器前缀法， IE条件注释法。
参考

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

• 要不要做
  • 产品的角度（产品的受众、受众的浏览器比例、效果有限还是基本功能有先
  • 成本的角度（有无必要做某件事）
• 做到什么程度
  • 让哪些浏览器支持哪些效果
• 如何做
  • 根据兼容需求选择技术框架、库（jquery）
  • 根据兼容需求选择兼容工具（html5shiv.js, respond.js, css reset, nomalize.css, Modemizr）
  • postCSS
  • 条件注释、CSS Hack、js能力检测做一些修补
• 渐进增强(progressive enhancement):针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
• 优雅降级(graceful degradation):一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

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

• IE条件注释

用于非 IE 

• CSS属性前后缀法
  • “_″IE6 生效
  • "*" IE6 7生效
  • “\9″ IE6/IE7/IE8/IE9/IE10都生效
  • “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
  • “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
• Trident内核：主要代表为IE浏览器,前缀为-ms-
  Gecko内核：主要代表为Firefox,前缀为-moz-
  Presto内核：主要代表为Opera,前缀为-o-
  Webkit内核：产要代表为Chrome和Safari,前缀为-webkit-
• 选择器前缀法
  针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack（针对浏览器之间的表现差异而引入的，利用浏览器的bug来进行针对性处理）。例如：
  *html *前缀只对IE6生效
  *+html *+前缀只对IE7生效
• 条件注释法和类选择器相结合

--------------------------------------------------------------------
.clearfix {
  /* 在非ie 7 浏览器中，clearfix展现该属性 */
}
.ie7 .clearfix {
   /* 只有ie7浏览器中，clearfix才会展现该属性 */
}

参考

• 使用Modernizr
  Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”（可以在css文件中针对不同的class设置不同的属性值）。

      
      
     
  
  

...

---

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

• 条件注释：条件注释 ( conditional comment )是用于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。（IE 10 及以后不再支持条件注释）
• IE Hack： 写出针对IE浏览器的CSS code称为IE hack，让它能在IE浏览器中也能得到我们想要的页面效果。
• js 能力检测：能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。
• html5shiv.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
• respond.js： Respond.js让不支持CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
• css reset: “样式重置”——重置浏览器默认样式
• normalize.css: Normalize.css是一种CSS reset的替代方案，

我们创造normalize.css有下面这几个目的 ：
- 保护有用的浏览器默认样式而不是完全去掉它们
- 一般化的样式：为大部分HTML元素提供
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性：用一些小技巧
- 解释代码：用注释和详细的文档来

• Modernizr:一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
• postCSS: PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树（AST）。PostCSS的目标是通过自定义插件和工具这样的生态系统来改造CSS，把扩展的语法和特性转换成现代的浏览器友好的CSS。

5. 一般在哪个网站查询属性兼容性？

caniuse