浏览器兼容

2017-05-13  本文已影响0人  LeeoZz

不同厂商的浏览器，或同一厂商不同版本的浏览器，对css的解析识别是不一样的，因此同样的一份css代码，在不同浏览器下会有不一样的表现。这时为了达到我们想要页面效果，就要为不同的浏览器写不一样的css代码，让它能兼容不同的浏览器，在不同的浏览器上得到我们想要的效果，这就是CSS hack。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

1.要不要做兼容？
对于一个网站，我们要大致了解它的受众人群，受众的浏览器，要确定这个网站是效果优先还是基本功能优先，里面的有些效果是否有必要实现等等，通过这些来确定浏览器是否要做兼容。
2.做到什么程度？
兼容IE6？兼容IE7？还是都兼容？
3.选择合适的工具进行开发
根据兼容需求选择技术框架/库(jquery等)；
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr
postCSS）；
条件注释、CSS Hack、js 能力检测做一些修补。

总结：
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验；
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

1.条件注释
条件注释是在HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
条件注释对IE的版本和IE非IE有优秀的区分能力，是web设计中常用的hack方法。

    <!--[if IE 6]> /*如果是IE6，则<p>生效*/
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!--> /*如果是非IE，则<script>生效*/
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]> /*如果是IE8，则<link>生效*/
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

注意：IE10以后不再支持条件注释。

项目 示例 说明
！ <if !IE> 非IE
lt <if lt IE6> 小于IE6
lte <if lte IE6> 小于等于IE6
gt <if gt IE6> 大于IE6
gte <if gte IE6> 大于等于IE6

2.css属性前缀法
IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。因此我们可以利用这些特性，针对不同浏览器添加只有该浏览器能识别的css代码，完成hack
示例：

/*在不同浏览器下有不一样的颜色表现*/
.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

/*在firefox总是绿色的，IE6总是红色的*/
div{
background:green;/*forfirefox*/
*background:red;/*forIE6*/(bothIE6&&IE7)
}

3.选择器前缀法
与属性前缀法类似，针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

/*常见的选择器hack*/
*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.使用Mordernizr.js
Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库，运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox），下面这段代码是运行在Chrome下的效果：

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage 
              websqldatabase indexeddb hashchange history draganddrop websockets 
　　　　　　　　rgba hsla multiplebgs backgroundsize borderimage borderradius 
　　　　　　　　boxshadow textshadow opacity cssanimations csscolumns cssgradients
　　　　　　　　cssreflections csstransforms csstransforms3d csstransitions fontface 
　　　　　　　  generatedcontent video audio localstorage sessionstorage webworkers 
              applicationcache svg inlinesvg smil svgclippaths">

它显示了chrom浏览器下支持和不支持的特性。
下面是它的一个运用示例，在支持shadow阴影的浏览器显示shadow，不支持的浏览器显示标
准的边框:

.boxshadow #MyContainer {
    border: none;
    -webkit-box-shadow: #666 1px 1px 1px;
    -moz-box-shadow: #666 1px 1px 1px;
}
    
.no-boxshadow #MyContainer {
    border: 2px solid black;
}

如果浏览器支持boxshadow，Modernizr就会在html上添加class=boxshadow，对应到css中生成阴影，如果不支持，则生成class=no-boxshadow，对应到css中生成边框。

条件注释

条件注释是在HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
条件注释对IE的版本和IE非IE有优秀的区分能力，是web设计中常用的hack方法。

    <!--[if IE 6]> /*如果是IE6，则<p>生效*/
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!--> /*如果是非IE，则<script>生效*/
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]> /*如果是IE8，则<link>生效*/
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

IE hack

针对IE，对css进行hack，保证css能在IE下被正常解析识别。

JS 能力检测

用JS对浏览器支持什么特性进行检测，针对某些特性，给出特定的解决方案，这是解决浏览器兼容的一种检测。

html5shiv.js

IE浏览器由于对html5不能很好的支持（IE9以上部分支持，IE6/IE7/IE8不支持），导致许多用html5编写的网站不能用IE正常访问。html5shiv.js是一个js库，它通过模拟的方式，使IE可以正常访问html5编写的页面。

respond.js

IE6-IE8不支持媒体查询，使用respond.js可以使IE6-IE8支持媒体查询。

css reset

对浏览器的默认样式进行重置

normalize.css

normalize.css是css reset发展的产物，如果说reset是把浏览器的一切默认样式都进行重置，那么normalize.css的理念则是尽量保留浏览器的默认样式，不进行太多的重置。

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

Modernizr

Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库，运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox），下面这段代码是运行在Chrome下的效果：

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage 
              websqldatabase indexeddb hashchange history draganddrop websockets 
　　　　　　　　rgba hsla multiplebgs backgroundsize borderimage borderradius 
　　　　　　　boxshadow textshadow opacity cssanimations csscolumns cssgradients
　　　　　　cssreflections csstransforms csstransforms3d csstransitions fontface 
　　　　　　　 generatedcontent video audio localstorage sessionstorage webworkers 
              applicationcache svg inlinesvg smil svgclippaths">

postCSS

postCSS可以理解为后编译器，它提供了一个平台，在平台上我们可以用js开发一些插件（如autoprefixer）来处理我们的css文件，我们只要正常的编写css，postcss就可以帮我们自动生成具有兼容性的css。

caniuse.com

上一篇下一篇

猜你喜欢

热点阅读