浏览器兼容思路
- 什么是 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属性兼容
网友评论