任务12 -浏览器的兼容性

1.什么是 CSS hack

不同厂商的浏览器，例如Internet explorer、Safari、Mozilla Firefox、Chrome等，或者同一厂商的浏览器的不同版本，如IE6和7，对css的解析和认识会完全不一样，因此会导致生成和预想相差很大的页面效果，此时我们需针对不同的浏览器写不同的css，让它在不同的浏览器中展现预想的效果
css hack大致有三种表现形式：

名称	别称	举例
属性前缀法	内部hack	ie6能识别下划线和星号，ie7可以识别星号但不能识别下划线，ie6~ie10都识别“\9”，firefox前述三个都不识别
选择器前缀法	选择器hack
ie条件注释法	html条件注释hack	针对所有ie：<!--[if IE]>IE浏览器显示的内容<![endif]-->。针对ie6及以下的版本：<!--[if lt IE6>只在IE6-显示的内容<![endit]-->。这类hack不仅对 css生效，对写在判断语句里面的所有代码都会生效

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

• 如何做
  产品角度：受众群，受众群浏览器比例，优先效果还是优先基本功能
  让哪些浏览器支持哪些效果
  渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  优雅降级（graceful degradation）：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容
• 解决方案
  根据兼容需要选择技术框架、库
  根据需要选择兼容工具（html5shiv.js respond.js、css reset、 normalize.css、modernizr）
  条件注释、css hack、js能力检查做修补

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

• 例1

<!--[if IE 6]> （在ie6里的被识别的标签）
    <p>You are using Internet Explorer 6.</p>
 <![endif]-->
<!--[if !IE]><!--> 
    <script>alert(1);</script> （在chrome里被识别的只有这一句）
<!--<![endif]-->
 <!--[if IE 8]>（在ie8里的被识别的标签）
     <link href="ie8only.css" rel="stylesheet"> 
<![endif]-->

• 例2

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

• 例3

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

• 例4

.target{
  display: inline-block;
  *display: inline;/* 仅对ie67有效 */
  *zoom: 1;/* 仅对ie67有效 */
}

• 例5

<!--[if lt IE 9]>/* 仅对ie9以下有效 */
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

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

• 条件注释：conditional comment，是用于html源码中被ie有条件解释的语句，条件注释可被用来像ie提供及隐藏代码，ie10以上不再支持条件注释

• IE Hack：使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，有CSS属性前缀法、选择器前缀法以及IE条件注释法

• js 能力检测：使用JS的语法检测浏览器支持的属性，以便展示效果

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

• respond.js：响应式媒体查询，可以在ie6、ie7上模拟出自己无法识css的属性，可以模拟css3的媒体查询

• css reset：去除浏览器的默认样式

• normalize.css：是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，normalize.css是一种现代的、为HTML5准备的优质替代方案。normalize.css保护浏览器有用的默认样式，而不是完全去掉他们，为大部分html元素提供一般化的样式，修复浏览器自身的bug并保证浏览器的一致性

• Modernizr：处理兼容问题，Modernizr是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。

• postCSS：用标准写法写css最后添加一个命令自动添加可以被老版本的浏览器接受的写法

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

canius.com查询css属性兼容
browserhacks查hack写法