浏览器兼容性简介

1.什么是 CSS hack

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack。

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

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

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

• 条件注释法
  条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。IE10之后不再支持条件注释。

条件注释语法

You are using Internet Explorer 6.

这句只有浏览器为ie6时才会起作用。
这句只有浏览器不是IE时才起作用。

• CSS属性前缀法
  属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识

.box{
  color: red;    各浏览器均能识别
  _color: blue; /*ie6*/只有ie6能识别
  *color: pink; /*ie67*/只有ie6或ie7能识别
  color: yellow\9;  /*ie/edge 6-8*/只有ie6-9能识别
}

• 选择器前缀法
  选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
  目前最常见的是
  *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有效

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

.box {
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -o-border-radius: 10px; 
    border-radius: 10px; 
}

• 使用Modernizr
  使用Modernizr识别浏览器对各属性的兼容性。在不兼容的情况下补上特定的兼容样式以保证网页的可读性。
  添加完Modernizr引用以后，它就立即生效了。运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox）。
  下面这段代码是运行在IE9下的效果：

no-开头的便是浏览器不支持的特性。

.boxshadow #MyContainer {
    border: none;
    -webkit-box-shadow: #666 1px 1px 1px;
    -moz-box-shadow: #666 1px 1px 1px;
}
    
.no-boxshadow #MyContainer {
    border: 2px solid black;
}

可以像这样为no-boxshadow定义兼容样式，当浏览器不支持boxshadow特性时，便会使用兼容样式代替。

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

• 条件注释
  条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。可以通过条件注释使某些代码仅被某些特定浏览器解析，从而解决浏览器兼容问题。
• IE Hack
  针对ie浏览器的css hack。

#hack{
color:red; /* 所有浏览器都支持 */
color:red !important;/* 除IE6外 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
+color:red;/*IE7支持*/
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8、IE9支持 */
color:red\0; /* IE8、IE9支持 */
color:red\9\0;/*IE9支持*/
}

• js 能力检测
  浏览器提供商虽然在实现公共接口方面投入了很多精力，但结果仍然是每一种浏览器都有各自的长处，也都有各自的缺点。即使是那些跨平台的浏览器，虽然从技术上看版本相同，也照样存在不一致性问题。面对普遍存在的不一致性问题，开发人员要么采取迁就各方的“最小公分母”策略，要么（也是更常见的）就得利用各种客户端检测方法，来突破或者规避种种局限性。
  能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
• html5shiv.js
  htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
• respond.js
  通过加载此js文件可以在ie678环境下模拟css3的媒体查询功能。适用于响应式开发。
• css reset
  每个浏览器默认样式不同，通过css reset可以清除浏览器默认样式，再进行样式的添加，可以使页面在各浏览器上的显示效果趋于一致。
• normalize.css
  Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。
  Normalize.css做了以下几件事：
  保护有用的浏览器默认样式而不是完全去掉它们
  为大部分HTML元素提供一般化的样式
  修复浏览器自身的bug并保证各浏览器的一致性
  用一些小技巧优化CSS可用性
  用注释和详细的文档来解释代码
• Modernizr
  从实际操作来看，Modernizr默认做的事情很少，除了（在你选择的情况下）给不支持html5的标签的浏览器，如IE6，7，8追加一点由Remy Sharp开发的html5垫片脚本，使其识别
  、

  等html5元素之外，它主要做的就是浏览器‘功能检测’。
  因此，它知道浏览器是否支持各种html5和css3特性。
• postCSS
  PostCSS 是一个样式处理工具。PostCSS 旨在通过自定义的插件和工具生态体系来重新定义 CSS。与类似 Sass 和 LESS 这样的预处理机制类似，它可以把扩展的语法和功能转换成现代的浏览器友好的 CSS 代码。

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

http://caniuse.com