浏览器兼容

2017-08-05 本文已影响11人 DeeJay_Y

浏览器兼容思路

什么是 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属性兼容

浏览器兼容

浏览器兼容思路

浏览器兼容行动

浏览器兼容工具

猜你喜欢

热点阅读