任务十二，浏览器兼容

什么是 CSS hack

css hack 由于不同厂商的浏览器或者同一厂商的浏览器的不同版本，IE6 IE7,对css的解析认识完全不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果，这个时候，我们需要针对不同的浏览器，去写不同的css，让他能够同时兼容不同的浏览器，能在不同的浏览器中也得到我们想要的页面结果。简单的说，css hack 的目的就是使写的代码能够兼容不同的浏览器，我们也可以反过来利用css hack，为不同版本的浏览器定制编写不同的css效果。
css hack 大致有三种表现形式：
1）css属性前缀法。例如 ie6能识别下划线和* ie7 能识别*，但是不能识别下划线， IE6~IE10都认识“\9”,但是firefox 前述的三个都不能...
2)选择器前缀法
3）IE条件注释法

谈一谈浏览器兼容的思路

考虑方向：
1）从产品的角度考虑（产品的受众，受众的浏览器比例）效果有限还是功能有限
2）做到什么程度，让哪些浏览器支持哪些效果
3）成本的角度考虑，如果为了一个简单的样式需要写大量的代码或者动好几个地方是否值得。
如何做
1）根据兼容需求，选择技术框架( bootstrap >=ie8
jquery 版本1>=IE6 版本2>=IE9
vue >=ie9)、jQuery库，
2）根据兼容需求，选择兼容工具
3）使用postcss，postcss是用js转换样式的工具。
4）条件注释、CSS Hack、js 能力检测做一些修补
使用渐近增强和优雅降级的方法：
渐近增强：针对低版本浏览器进行构建页面，保证最低的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能，大搞更好的用户体验。
优雅降级：一开始构建完整的功能，然后在针对低版本浏览器进行兼容。

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

条件注释
css 属性前缀法
box{
color: red;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}
.clearfix{
zoom: 1; / 仅对ie67有效 */
}
选择器前缀法
@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有效
条件注释结合选择器
<!DOCTYPE html>

<html dir="ltr" lang="en-US" class="no-js">
利用一些和兼容相关的开发利器例如 css reset
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

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

1、条件注释:是于HTML源码中，被IE有条件解释的语句，条件注释可以被用来向IE提供及隐藏代码。
2、IE Hack ：针对ie，写的css效果能够在ie版本上兼容
3、js 能力检测浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
4、html5shiv.js：可以在旧版本IE中使用html5部分元素，并为IE 6~9 safari 4.x（和iPhone 3.x）和firefox 提供基本的html5样式。

respond.js : 可以让 IE 6-8 适用于 min-width 和max-width等没戏查询的css3新特性。
css reset :由于早期的浏览器支持和理解的css规范不同，导致渲染的页面效果不一致，会出现兼容性的问题，通过充值css属性，取消默认的样式。
normalize.css ：
1)能保留有用的默认值，不同于许多css的充值
2）标准化样式，使用范围广的元素
3）纠正错误和常见的浏览器的不一致性
4）一些细微的改进，提高了易用性。
5）使用详细的注释来解释代码。
Modernizr：既能给老版本打补丁，又能保证新浏览器渐近增强的用户体验。除了能给不支持htmt5 标签的浏览器追加一点儿html5的垫片脚本，使其识别aside、section等html5元素之外，主要做的就是浏览器功能检测。他知道浏览器是否支持html5 和css特性。
postCSS ：提供一个解析器，它能够将css解析成抽象的语法树，他能够为css提供额外的功能，能够通过postcss 这个平台开发插件来处理我们的css，我们能够使用JavaScript来开发插件。

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

http://caniuse.com/