web前端-浏览器兼容

1. 什么是 CSS hack？

---

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

CSS Hack大致有3种表现形式

---

1. CSS属性前缀法

_color:red;  /*ie6*/
*color:blue; /*ie6,ie7*/
color:yellow\9; /*ie6-ie8*/

2. 选择器前缀法
3. IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
   注:IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->                       /*只在IE7浏览器下显示*/
<!–-[if lt IE 6]>
<link rel="stylesheet" href="ie5.css" type="text/css" />
<![endif]–->    /*小于IE6浏览器下显示*/

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

---

1. 要不要做？
   首先要根据你的产品的受众，还有成本和收益考虑，是否有必要做浏览器兼容。然后要考虑是否有其他方案可以代替浏览器兼容，用其他的方法来模拟同样的效果。
2. 做到什么程度？
   做到兼容到哪一个程度，Internet Explorer,Safari,Mozilla Firefox,Chrome中兼容哪几个，IE浏览器支持哪几个版本。
3. 怎么做？
   根据兼容需求选择技术库和框架比如
   bootstrap（>=ie8）
   jquery 1.~(>=ie6),jquery 2.~(>=ie9)
   vue(>=ie9)
   根据兼容需求选择兼容工具包括：比如html5shiv.js、respond.js、等。
   条件注释、CSS Hack、js 能力检测做一些修补。

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

---

(1) 条件注释：

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->                       /*只在IE7浏览器下显示*/

(2) 属性前缀法：

.box{
color: red;
_color: blue; /ie6/
color: pink; /ie6,7/
color: yellow\9; /ie/edge 6-10/
}

(3) 选择器前缀法

*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) 条件注释和兼容工具相结合

<!–-[if IE 7]>
<script src="../js/html5shiv.js"></script>
<![endif]–->   

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

---

名词	含义
条件注释	基于HTML源码中被IE(IE<=9)有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
IE Hack	针对IE浏览器编写不同的CSS（属性前缀法、选择器前缀法、IE条件注释法）使得页面效果在不同版本的IE浏览器中达到效果一致。
js 能力检测	使用JS来检测浏览器拥有的能力而不是来区分是什么浏览器。这样如果浏览器拥有某种能力则提供一种方案，没有某种能力则提供另一种方案。
html5shiv.js	针对不支持HTML5标签的浏览器，创建并模拟HTML5的标签的效果并使相应的CSS生效。
respond.js	为不支持CSS3媒体查询的浏览器(IE6-8)模拟CSS3的媒体查询。
css reset	清除浏览器默认的元素样式。
normalize.css	保护有用的浏览器默认样式；一般化的样式，修复浏览器自身的bug并保证各浏览器的一致性；优化CSS可用性。
Modernizr	是一个JS类库，用来检测浏览器的CSS3和HTML5能力，从而解决浏览器的兼容问题。
postCSS	利用JS插件转换CSS。可以将CSS解析成抽象语法树。

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

---

http://caniuse.com/

(mission12)