浏览器兼容

什么是CSS hack？

不同厂商的浏览器，或同一厂商不同版本的浏览器，对css的解析识别是不一样的，因此同样的一份css代码，在不同浏览器下会有不一样的表现。这时为了达到我们想要页面效果，就要为不同的浏览器写不一样的css代码，让它能兼容不同的浏览器，在不同的浏览器上得到我们想要的效果，这就是CSS hack。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

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

1.要不要做兼容？
对于一个网站，我们要大致了解它的受众人群，受众的浏览器，要确定这个网站是效果优先还是基本功能优先，里面的有些效果是否有必要实现等等，通过这些来确定浏览器是否要做兼容。
2.做到什么程度？
兼容IE6？兼容IE7？还是都兼容？
3.选择合适的工具进行开发
根据兼容需求选择技术框架/库(jquery等)；
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr
postCSS）；
条件注释、CSS Hack、js 能力检测做一些修补。

总结：
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验；
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

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

1.条件注释
条件注释是在HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
条件注释对IE的版本和IE非IE有优秀的区分能力，是web设计中常用的hack方法。

    
     /*如果是非IE，则

注意：IE10以后不再支持条件注释。

项目	示例	说明
！		非IE
lt		小于IE6
lte		小于等于IE6
gt		大于IE6
gte		大于等于IE6

2.css属性前缀法
IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。因此我们可以利用这些特性，针对不同浏览器添加只有该浏览器能识别的css代码，完成hack
示例：

/*在不同浏览器下有不一样的颜色表现*/
.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

/*在firefox总是绿色的，IE6总是红色的*/
div{
background:green;/*forfirefox*/
*background:red;/*forIE6*/(bothIE6&&IE7)
}

3.选择器前缀法
与属性前缀法类似，针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

/*常见的选择器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有效*/

4.使用Mordernizr.js
Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库，运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox），下面这段代码是运行在Chrome下的效果：

它显示了chrom浏览器下支持和不支持的特性。
下面是它的一个运用示例，在支持shadow阴影的浏览器显示shadow，不支持的浏览器显示标
准的边框:

.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;
}

如果浏览器支持boxshadow，Modernizr就会在html上添加class=boxshadow，对应到css中生成阴影，如果不支持，则生成class=no-boxshadow，对应到css中生成边框。

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

条件注释

条件注释是在HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
条件注释对IE的版本和IE非IE有优秀的区分能力，是web设计中常用的hack方法。

    
     /*如果是非IE，则

IE hack

针对IE，对css进行hack，保证css能在IE下被正常解析识别。

JS 能力检测

用JS对浏览器支持什么特性进行检测，针对某些特性，给出特定的解决方案，这是解决浏览器兼容的一种检测。

html5shiv.js

IE浏览器由于对html5不能很好的支持（IE9以上部分支持，IE6/IE7/IE8不支持），导致许多用html5编写的网站不能用IE正常访问。html5shiv.js是一个js库，它通过模拟的方式，使IE可以正常访问html5编写的页面。

respond.js

IE6-IE8不支持媒体查询，使用respond.js可以使IE6-IE8支持媒体查询。

css reset

对浏览器的默认样式进行重置

normalize.css

normalize.css是css reset发展的产物，如果说reset是把浏览器的一切默认样式都进行重置，那么normalize.css的理念则是尽量保留浏览器的默认样式，不进行太多的重置。

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

Modernizr

Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库，运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox），下面这段代码是运行在Chrome下的效果：

postCSS

postCSS可以理解为后编译器，它提供了一个平台，在平台上我们可以用js开发一些插件（如autoprefixer）来处理我们的css文件，我们只要正常的编写css，postcss就可以帮我们自动生成具有兼容性的css。

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

caniuse.com

浏览器兼容

什么是CSS hack？

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

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

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