浏览器兼容思路
- 什么是 CSS hack
由于不同的浏览器，比如IE6,IE7,Firefox等，对CSS的解析标准不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这时我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中得到想要的相同的效果。
这个针对不同的浏览器写不同的CSS的过程，就叫css hack。
- 谈一谈浏览器兼容的思路
要不要做：
产品的角度（受众，受众浏览器比例，效果优先还是基本功能优先）
成本的角度（有没有必要做）
做到什么程度：
让哪些浏览器支持哪些效果
如何做：
根据兼容需求选择技术框架/库
根据兼容需求选择兼容工具(html5shiv.js,respond.js,css reset,normalize.css)
条件注释，CSS hack，js能力检测做一些修补
- 渐进增强和优雅降级
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级（graceful degradation）:一开始就构建完整的功能，然后再针对低版本浏览器继续兼容。
浏览器兼容行动
- 浏览器兼容的写法
css hack有3种表现形式：css属性前缀法，选择器前缀法，以及IE条件注释法。大部分是针对IE浏览器不同版本之间的表现差异而引入的。
- 属性前缀法（类内部hack）：IE6可以识别下划线和星号，IE7可以识别星号，但不能识别下划线,IE6~IE10都识别\9。
.box{
color: red;
_color: blue; /*IE 6*/
*color: green; /*IE 6 7*/
color: yellow\9; /*IE EDGE 6-8*/
}
-
选择器前缀法（选择器hack）
-
IE条件注释法
-
常见属性的兼容情况
inline-block >= ie8
min-width/min-height >=ie8
:before,:after >=ie8
div:hover >=ie7
inline-block>=ie8
background-size>=ie9
圆角>= ie9
阴影>=ie9
动画/渐变>=ie10 -
常见兼容处理范例：
清除浮动写法：
<style type="text/css">
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clear{
*zoom: 1; /*针对ie6 7*/
}
</style>
兼容inline-block:
<style type="text/css">
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
</style>
一般兼容性差的先写，做兼容性处理的语句放到后面。
条件注释写法
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
css hack:
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
使用浏览器兼容工具：
小于ie9时生效
<!--[if lt IE 9]>
<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]-->
浏览器兼容工具
-
条件注释(conditional comment)
是于html源码中被IE有条件解释的语句。可被用来向IE提供及隐藏代码。IE10不再支持 -
IE Hack
指的是IE浏览器漏洞，利用IE Hack，我们可以兼容IE低版本。 -
js 能力检测
检测当前浏览器支持和不支持的特性。如Modernizr.js,它会为浏览器的html标签生成一批的css的class名称，标记当前浏览器支持和不支持的特性。我们利用html标签上的类名，就可以为不同版本的不同浏览器添加兼容样式 -
html5shiv.js
html5shiv.js主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。 -
respond.js
模拟css3的媒体查询，是一种css兼容工具。可在IE6~8（不支持css3）上模拟CSS3 Media Queries -
css reset
强制重置浏览器默认样式，使其都清零，使得所有页面效果一致。 -
normalize.css
是作为css reset的改良版，没有暴力的把所有浏览器默认样式都去掉，而是保护了有用的默认浏览器样式，一般化了大部分html样式，修复了浏览器自身的bug，优化了css的可用性。 -
Modernizr
是一个js库，用来检查浏览器对于属性的支持，给相应的html加上class便于书写不同浏览器下的兼容性样式。 -
postCSS
它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码. -
兼容性查询网站
caniuse查询css属性兼容
网友评论