五步轻松实现对现代浏览器的兼容

  

　　作为Web攻城师，最头疼的问题莫过于浏览器兼容性测试，各种类型浏览器，各种版本的浏览器，还有各种头疼的前缀等等。dev.modern.IE是微软推出的用来帮助开发者创建现代网站的基本开发工具，建议使用网站兼容性扫描工具 http://dev.modern.ie/tools/staticscan/ 来扫描你的网站，看看你的网站是否存在一些兼容性问题。请根据以下五步进行检查，就可基本解决兼容性问题，实现对Google Chrome、Microsoft Edge、Apple Safari等现代浏览器的兼容。

 

1. 检查网站是否在标准模式下渲染

 　　在W3C的标准出台前，浏览器对网页的渲染没有统一的标准，各家有各家的方式。当W3C标准出来之后，标准的渲染模式就称之为标准模式，而各家浏览器还保留了原来的渲染方式来兼容旧版本的网站，称之为"Quirks Mode（一般翻译为怪异模式或者兼容模式）"。那浏览器怎么知道用标准模式还是兼容模式来解析你的网站呢？现在的浏览器厂商们基本都是用Doctype来判断。如果你的网页没有Doctype的声明，那么浏览器就认为你的网站是老旧版本，浏览器将启用兼容模式来解析你的网站，这样对于用户来说，将不能够得到足够优秀的体验。

检查你的网站是否被使用兼容模式渲染，最简单的方式是使用IE作为测试工具来测试。

  • 在IE11中打开你的网站。
  • 按F12键启动F12开发人员工具，或者你也可以在IE的工具栏中找到它。
  • 检查工具栏右上角是否有Edge的标志，如果有Edge标志，那么恭喜你，你的网站已经运行在符合IE最新标准的标准模式下。如果显示不是Edge，那么你的网站是在兼容模式下渲染。

如果你的网站是被当作兼容模式渲染，那么可能是存在以下问题：

  • DOCTYPE无效或者缺失

    检查是否使用了有效并且格式正确的DOCTYPE。如果你的网站是采用HTML5标准的网站，请使用标准HTML5的Doctype声明：。

<!DOCTYPE html>

 

  • 文档模式受到X-UA-Compatible这个元标签的强制限制

　　在IE11之后已经弃用文档模式，除了临时情况外不应再使用。如果你当前针对旧文档模式使用 X-UA-Compatible 标头，那么你的网站可能无法使用IE11最新的功能。如果必须针对特定文档模式，以便支持你现在的网站能够工作，则需要注意，你使用的是过渡功能，以后的版本中可能不提供该功能。请在页面检查是否存在类似以下的代码，删除并重新测试你的网站。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<meta http-equiv="X-UA-Compatible" content="IE=8">

 

  • 可能你的网站处于兼容性视图列表（Compatibility View List）中，IE强制将你的网站在兼容视图中显示，以保证网站能够正确显示。

    首先检查你的网站是否在兼容性视图列表中。兼容性视图列表是一个xml文件，该文件位于：

    C:\Users\%YOUR_USERNAME%\AppData\Local\Microsoft\Internet Explorer\IECompatData\iecompatdata.xml

    这个文件维护着系统下的网站与IE的兼容信息，每日更新。如果你发现你的网站存在于兼容列表中，请你修改网站中不符合HTML5标准的内容，然后向iepo@microsoft.com 发送电子邮件，请求在 Web 上有可用更新时，请求将你的网站移出兼容性视图列表。邮件需要包含以下内容：（所有者名称、公司职务、电子邮件地址、电话号码、公司名称、街道地址、网站地址）。

    微软将审查提供的信息，并在下一个计划的列表更新时从"兼容性视图列表"中删除你的站点

 

2.  检查你使用的框架与类库是否存在兼容性问题

　　使用一些过时的框架和类库有可能引起兼容性问题，请仔细检查你的网站使用的框架和类库的版本信息与其最新版本信息，看看是否与最新版本的IE兼容。建议使用兼容性最高稳定性最好的框架版本，比如JQuery请使用1.7.2版本。如果使用最新的版本的话，请进行多次测试。除了稳定性最高以及最新的版本两个版本以外的版本，不推荐使用。

　　你们可能会问哪个版本才是兼容性最高稳定性最高的框架版本呢？

　　请使用http://dev.modern.ie/tools/staticscan/ 扫描你的网站，网站会检查你是否使用了流行的框架、检查其版本并给出建议。

 

3.  检查你的网站是否还依然在使用UA探测

　　以前，要知道用户的浏览器是否支持一个特殊的功能的方式通常是检测浏览器的类型以及版本，然后选择相应的代码段执行，这个过程通常称之为User Agent检测，简称UA检测。但是这个过程是非常容易出错的，容易被欺骗，代码逻辑复杂，而且随着浏览器版本的增加，维护困难。

　　在现在的web开发中，我们会有更好的方式来解决这些问题。现在都基本不检测浏览器的类型和版本了，现在用本地的方法和对象来检测用户的浏览器所是不是支持某些功能，我们称之为功能检测。通过功能检测，我们能够知道某个方法在某个浏览器上是否真正可用，调用更加安全，逻辑也更加清楚。

//错误示范，极不推荐
if (navigator.userAgent.indexOf("MSIE 7") > -1) {
// Only for IE7
}

//√正确示范，推荐做法
function load() {
　　if ('localStorage' in window) {
　　// Now use local storage
　　return;
　　}
}

　　推荐使用自动化工具Modernizr来进行功能检测，然后根据检测的结果来执行相应的逻辑，而不是根据UA检测的结果。更多关于功能检测的请参考这里：http://te-webtraining.azurewebsites.net/cn/samples/feature-detection.html

 

 4. 检查你的浏览器前缀是否正确

　　我们在做Web开发的时候，我们需要用到浏览器前缀（Vendor prefixes）来使用一些比较新的CSS或者JavaScript的属性。浏览器前缀包含CSS前缀以及JavaScript前缀，我们说到浏览器前缀一般是指CSS前缀。CSS前缀是用来添加对一些实验性的功能或者属性的支持。他们不是CSS标准的一部分，但是他们是浏览器现存的一些属性，也许未来会成为CSS 标准的一部分。

　　以下是四个主要的浏览器前缀：

-ms-

Microsoft

-moz-

Mozilla

-o-

Opera

-webkit-

Safari, Chrome, 以及其他基于WebKit的browsers

　　也许有的时候属性加了-webkit-或者-moz-，就是没有-ms-。如果在IE中默认属性没有正常工作，尝试一下加上IE的浏览器前缀-ms-，-webkit-, -moz- 和-o-不会影响IE怎么渲染属性。当前的IE10和IE11已经支持了非常多的CSS3标准属性，保证标准属性在没有前缀下也能正常工作。当属性没有正常工作的时候，加上 -ms-试试吧（或者到caniuse.com查查看）。　　标准属性可以在很多现在的浏览器中正常工作，但是如果你不确定某个属性是否需要前缀或者是否能在某个浏览器工作，可以上 caniuse.com查看。所有这些工作都非常得耗费精力和时间，所以我们是不是可以有自动化的过程呢?　　答案是肯定的。对我们开发者开说，有很多自动化工具来帮助我们完成前缀的过程。这些工具能够帮助我们大大提高添加浏览器前缀的效率。你可以选择前期处理的mixin工具包如Sass 的 Compass 和Stylus的 Nib 。但是如果你不想要包含他们所有的Mixin库，你只是想把你的CSS加上浏览器前缀，那你可以使用Autoprefier。Autoprefixer将会解析你的CSS文件（如果是使用前期处理工具，那么是在编译之后）并且根据caniuse.com上的数据添加适当的浏览器前缀。这个工具将帮你写CSS的时候无需担心某一个属性是否可用或者是否该加浏览器前缀。

　　而对于JavaScript前缀来说，目前还没有比较好的自动化工具，不过你还是可以通过caniuse.com来查询。

　　更多关于浏览器前缀的内容，请访问：http://te-webtraining.azurewebsites.net/cn/samples/vendor-prefixes.html

　　下载并使用Autoprefixer，请访问：https://github.com/postcss/autoprefixer

 

5. 检查你的网站是否还在使用插件

　　随着移动互联网的发展，越来越多的浏览行为是在日益增多的移动设备以及这些设备自带的浏览器上发生的，因此越来越多的用户正在不支持插件的浏览器下浏览。向这些不使用插件浏览的用户提供优秀的网站体验，是一项非常重要的工作，因为网站必须要面向最广泛的目标群体。而且越来越多的现代浏览器已经宣布停止支持插件技术，比如Google宣布在Chrome42版本以上不再支持NPAPI，详细请见：https://www.chromium.org/developers/npapi-deprecation 。微软Edge也不支持ActiveX、BHO等插件技术。

我们建议网站不再使用这些插件技术，利用HTML5，现代的浏览器和网站即使不用插件，也能提供优秀的用户体验。

功能

基于插件的技术示例

基于标准的等效技术

详细信息

视频和音频

Flash、Apple QuickTime、Silverlight

HTML5 视频 和音频

视频、 音频

图形

Flash、Apple QuickTime、Silverlight、Java 小程序

HTML5 Canvas 、可缩放的向量图形 (SVG)、级联样式表级别 3 (CSS3) 过渡 和动画、CSS 转换、WebGL

Canvas、SVG、过渡、动画、转换、WebGL

脱机存储

Flash、Java 小程序和 Google Gears

Web 存储、文件 API、IndexedDB 和应用程序缓存 API

Web 存储、文件 API、IndexedDB 和应用程序缓存 API

网络通信、资源共享和文件上载

Flash 和 Java 小程序

HTML5 Web 消息传递和跨源资源共享 (CORS)

通道消息传递、XMLHttpRequest

如果不得不使用插件，强烈建议先测试基于标准的功能是否可用，然后只在必要的时候用插件进行降级。尽量使用标准的HTML5功能进行开发，这样能使得你的网站在各个浏览器上都能有一个非常好的用户体验。

 

通过以上五步，你的网站将会完美兼容各种现代浏览器，如Google Chrome、Microsoft Edge以及Apple Safari等。以下是一些Web相关的资源和工具，有兴趣的童鞋可以深入了解。

附录

posted @ 2015-07-06 13:39  田蓝日暖  阅读(5476)  评论(0)  编辑  收藏  举报