前端基础05——浏览器兼容

2017-02-08 本文已影响45人 IT男的成长记录

1.浏览器兼容问题

浏览器与前端技术的发展不匹配
不同浏览器参考的标准、实现的方式不同

2.相关参考资料

3.处理兼容问题的思路

要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果有限还是基本功能有先
- 成本的角度（有无必要做某件事）
做到什么程度
- 让哪些浏览器支持哪些效果
如何做
- 根据兼容需求选择技术框架、库（jquery）
- 根据兼容需求选择兼容工具（html5shiv.js, respond.js, css reset, nomalize.css, Modemizr）
- postCSS
- 条件注释、CSS Hack、js能力检测做一些修补

4. 渐进增强和优雅降级

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

5. 选择合适的框架合适的框架

Bootstrap ( >= ie8 )
jQuery 1.~ ( >= ie6 ), jQuery 2.~ ( >= ie9 )
Vue ( >= ie9 )
...

6.条件注释

条件注释 ( conditional comment )是用于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码
条件注释可以被IE 10 之前的版本解释，IE 10 及以后不再支持条件注释

7.CSS hack

由于不同厂商的浏览器，比如IE, Safari, Mozila Firefox, Chrome等，或者是同一厂商的浏览器的不同版本，，如IE 6, IE 10, 对于CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。因此需要针对不同的浏览器去些不同的css，让它能在不同的浏览器中也能得到我们想要的页面效果
CSS Hack大致有三种表现形式，CSS属性前缀法, 选择器前缀法， IE条件注释法Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的（利用浏览器的bug来进行针对性处理）
常见hack写法

.box {
  color: red;   /* 所有浏览器都生效 */
  _color: blue; /* 只有 IE 6 生效 */
  *color: pink; /* 只有 IE 6 IE 7 生效 */
  color: yellow\9; /* IE 6~8 都生效 */
}

< !--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

8.常见属性的兼容情况

inline-block: >=ie 8
min-width/min-height: >=ie 8
:before, :after: >=ie 8
div:hover: >=ie 7
inline-block: >=ie8
background-size: >=ie 9
圆角：>= ie 9
阴影: >= ie 9
动画、渐变： >= ie 10

9.常见兼容处理范例

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1;  /* 仅针对ie67有效 */
}

.target {
  /* 在 IE 6，7，8上实现inline-block效果 */
  display: inline-block; /* IE 8生效 */
  /* 一下两句只有在 IE 6,7 上生效，结合产生inline-block效果*/
  *display: inline;
  *zoom: 1;
}

<!--[if IE 7]>
<html class="ie7 no-js">
...
</html>
<![endif]-->

.clearfix {
  /* 在非ie 7 浏览器中，clearfix展现该属性 */
}
.ie7 .clearfix {
   /* 只有ie7浏览器中，clearfix才会展现该属性 */
}

10.兼容性相关的开发工具

html5shiv.js:使用Javascript来使不支持HTML5的浏览器支持HTML标签。
respond.js: 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
css reset：“样式重置”——重置浏览器默认样式
Normalize.css:在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
Modernizr：一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
PostCSS：一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。

11.浏览器兼容的写法

IE 条件注释

<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE]> -->用于非 IE <!-- <![endif]-->

CSS属性前缀法
- “_″IE6 生效
  "*" IE6 7生效
  “\9″ IE6/IE7/IE8/IE9/IE10都生效
  “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
  “\9\0″ 只对IE9/IE10生效，是IE9/10的hack

.box {
  color: red;   /* 所有浏览器都生效 */
  _color: blue; /* 只有 IE 6 生效 */
  *color: pink; /* 只有 IE 6 IE 7 生效 */
  color: yellow\9; /* IE 6~8 都生效 */
}

* Trident内核：主要代表为IE浏览器,前缀为-ms

Gecko内核：主要代表为Firefox,前缀为-moz
Presto内核：主要代表为Opera,前缀为-o
Webkit内核：产要代表为Chrome和Safari,前缀为-webkit

.box {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

选择器前缀法
- 针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack（针对浏览器之间的表现差异而引入的，利用浏览器的bug来进行针对性处理）
  例如：
  *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有效
条件注释法和类选择器相结合

<!--[if IE 7]>
<html class="ie7 no-js">
...
</html>
<![endif]-->

.clearfix {
  /* 在非ie 7 浏览器中，clearfix展现该属性 */
}
.ie7 .clearfix {
   /* 只有ie7浏览器中，clearfix才会展现该属性 */
}

使用Modernizr
- 一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”（可以在css文件中针对不同的class设置不同的属性值）。（使用介绍）

<head>      
<meta charset="utf-8">      
<title>My Beautiful Sample Page</title>     
<script src="modernizr-1.5.min.js"></script>  
</head>  
<html class="no-js">
...

页面加载完后的代码

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

使用css reset或者Normalize.css，在默认的HTML元素样式上提供了跨浏览器的一致性

前端基础05——浏览器兼容

1.浏览器兼容问题

2.相关参考资料

3.处理兼容问题的思路

4. 渐进增强和优雅降级

5. 选择合适的框架合适的框架

6.条件注释

7.CSS hack

8.常见属性的兼容情况

9.常见兼容处理范例

10.兼容性相关的开发工具

11.浏览器兼容的写法

猜你喜欢

热点阅读