浏览器兼容

2017-09-06 本文已影响0人 zh_yang

1、什么是 CSS hack

不同厂商的浏览器（比如Internet Explorer,Safari,Mozilla Firefox,Chrome等）或者是同一厂商的浏览器的不同版本（如IE6和IE7）对某些CSS代码解析会存在一定的差异，因此就会导致不同浏览器下给用户展示的页面效果不一样，碰到这样的情况就需要开发人员通过针对不同的浏览器对应写出不同的CSS代码，从而达到兼容不同浏览器的目的，不会让页面因为浏览器的不同而产生有差异的显示，这种技术有个专门的名称就是CSS Hack。

在中国，这种差异主要是体现在主流浏览器上，我们只要解决了主流浏览器之间的CSS差异就可以了。目前流行的主流浏览器有Internet Explorer,Google Chrome,FireFox,Apple Safair以及Opera,在本文里对应简称为IE（后面如果添加数字，数字代表版本号，例如IE8），CH,FF,SA和OP。

CSS Hack原理是通过不同浏览器自身所带有的特别标识符以及CSS中优先级的机制来实现不同浏览器里CSS样式兼容性的问题。

CSS Hack有三种实现方式，它们分别是：

CSS类内部的Hack（CSS属性前缀法）；

例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识

CSS选择器的Hack（选择器前缀法）；

它是指在CSS选择器前面加上只有某种浏览器自己可以识别的特殊字符串。例如：IE6能识别*html .class{}，IE7能识别*+html .class{}。

HTML头部的Hack（IE条件注释法）。

针对所有IE(注：IE10+已经不再支持条件注释)： < !--[if IE] >IE浏览器显示的内容 < ![endif]-- >，针对IE6及以下版本：< !--[if lt IE 6] >只在IE6-显示的内容 < ![endif]-- >。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

2、谈一谈浏览器兼容的思路

首先确认要不要做兼容
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度
然后确认兼容程度)然后确认兼容程度
- 让哪些浏览器支持哪些效果
最后确定如何做)最后确定如何做
- 根据兼容需求选择技术框架/库(jquery)
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS)
- 条件注释、CSS Hack、js能力检测做一些修补
兼容的两种思想)兼容的两种思想
- 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

3、浏览器兼容的写法

CSS属性前缀法

* IE6,IE7可以识别
_ IE6可以识别
\9 IE6~IE10可以识别
-webkit- 针对safari，chrome浏览器的内核CSS写法
-moz- 针对firefox浏览器的内核CSS写法
-ms- 针对ie内核的CSS写法
-o- 针对Opera内核的CSS写法

box{
 color: red;
_color: blue; /*ie6*/
 *color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}

IE条件注释

IE条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码，注意：只有 IE9以下的浏览器才能识别这种语法，其他浏览器仅仅认为是普通注释。

    <!--[if IE 6]>
    <p>IE6下 这句生效，在其他浏览器下认为是普通注释</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert("在 IE 下条件语法生效，但script不执行。在非 IE 下上下两句都被当做注释所以当前 script 会执行");</script>
    <!--<![endif]-->
    <!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

IE条件注释引用兼容工具／针对某浏览器的css文件

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

IE条件注释结合类选择器，给特定浏览器的html增加新类名，css可有针对性书写

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

利用Modernizr工具

运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”。以下是IE9下生成的特征类型

<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">

.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;
}

4、以下工具/名词是做什么的

条件注释

条件注释是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。条件注释最初于IE5浏览器中出现，并且直至IE9均支持。微软已宣布于IE10停止支持

条件注释列举：

<!–[if !IE]><!–><!–<![endif]–><!–除IE外都可识别（IE10版本以上也可以识别）–>
<!–[if IE]><![endif]–><!–IE9以及以下版本可识别–>
<!–[if IE 5]><![endif]–><!–仅IE5可识别–>
<!–[if IE 5.0]><![endif]–><!–仅IE5.0可识别–>
<!–[if IE 5.5]><![endif]–><!–仅IE5.5可识别–>
<!–[if IE 6]><![endif]–><!–仅IE6可识别–>
<!–[if IE 7]><![endif]–><!–仅IE7可识别–>
<!–[if IE 8]><![endif]–><!–仅IE8可识别–>
<!–[if IE 9]><![endif]–><!–仅IE9可识别–>
<!–[if lt IE 5]><![endif]–><!–IE5以下版本可识别–>
<!–[if lt IE 5.0]><![endif]–><!–IE5.0以下版本可识别–>
<!–[if lt IE 5.5]><![endif]–><!–IE5.5以下版本可识别–>
<!–[if lt IE 6]><![endif]–><!–IE6以下版本可识别–>
<!–[if lt IE 7]><![endif]–><!–IE7以下版本可识别–>
<!–[if lt IE 8]><![endif]–><!–IE8以下版本可识别–>
<!–[if lt IE 9]><![endif]–><!–IE9以下版本可识别–>
<!–[if lte IE 5]><![endif]–><!–IE5以及IE5以下版本可识别–>
<!–[if lte IE 5.0]><![endif]–><!–IE5.0以及IE5.0以下版本可识别–>
<!–[if lte IE 5.5]><![endif]–><!–IE5.5以及IE5.5以下版本可识别–>
<!–[if lte IE 6]><![endif]–><!–IE6以及IE6以下版本可识别–>
<!–[if lte IE 7]><![endif]–><!–IE7以及IE7以下版本可识别–>
<!–[if lte IE 8]><![endif]–><!–IE8以及IE8以下版本可识别–>
<!–[if lte IE 9]><![endif]–><!–IE9以及IE9以下版本可识别–>
<!–[if gt IE 5]><![endif]–><!–IE5以上版本可识别–>
<!–[if gt IE 5.0]><![endif]–><!–IE5.0以上版本可识别–>
<!–[if gt IE 5.5]><![endif]–><!–IE5.5以上版本可识别–>
<!–[if gt IE 6]><![endif]–><!–IE6以上版本可识别–>
<!–[if gt IE 7]><![endif]–><!–IE7以上版本可识别–>
<!–[if gt IE 8]><![endif]–><!–IE8以上版本可识别–>
<!–[if gt IE 9]><![endif]–><!–IE9以上版本可识别–>
<!–[if gte IE 5]><![endif]–><!–IE5以及IE5以上版本可识别–>
<!–[if gte IE 5.0]><![endif]–><!–IE5.0以及IE5.0以上版本可识别–>
<!–[if gte IE 5.5]><![endif]–><!–IE5.5以及IE5.5以上版本可识别–>
<!–[if gte IE 6]><![endif]–><!–IE6以及IE6以上版本可识别–>
<!–[if gte IE 7]><![endif]–><!–IE7以及IE7以上版本可识别–>
<!–[if gte IE 8]><![endif]–><!–IE8以及IE8以上版本可识别–>
<!–[if gte IE 9]><![endif]–><!–IE9以及IE9以上版本可识别–>

IE Hack

针对IE浏览器的不同版本去写不同的CSS，让它能在这些浏览器中得到我们想要的页面效果。
方法：CSS属性前缀法、IE条件注释法以及选择器前缀法

js 能力检测

能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。这一部分检测是解决浏览器兼容问题的主要检测。

html5shiv.js

html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS样式应用在未知元素上只需执行document.createElement(elementName)即可实现。html5shiv就是根据这个原理创建的。

respond.js

respond.js是一个快速、轻量的polyfill，用于为IE6-8以及其它不支持CSS3 Media Queries的浏览器提供媒体查询的min-width和max-width特性，实现响应式网页设计（Responsive Web Design）

css reset

在HTML标签在浏览器里有默认的样式，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。

normalize.css

Normalize.css 只是一个很小的CSS文件，是一种CSS reset的替代方案，它让不同的浏览器在渲染网页元素的时候形式更统一。它能够:

保护有用的浏览器默认样式而不是完全去掉它们；

提供统一化的样式：为大部分HTML元素提供统一化的样式；

修复浏览器自身的bug并保证各浏览器的一致性；

优化CSS可用性：用一些小技巧；

解释代码：注释和详细的文档。

Modernizr

作为一个开源的 JavaScript 库，Modernizr 检测浏览器对CSS3或HTML5功能支持情况.
Modernizr会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript对象，同时在html标签加入方便你调整CSS的class名.另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。

postCSS

它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过postCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码。

5、常用网站

浏览器市场份额：
http://tongji.baidu.com/data/browser
查CSS属性兼容：
https://caniuse.com/
查 Hack 的写法：
http://browserhacks.com/