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

时间 2019-11-21

原文原文链接

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

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

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

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

在IE11中打开你的网站。
按F12键启动F12开发人员工具，或者你也能够在IE的工具栏中找到它。

检查工具栏右上角是否有Edge的标志，若是有Edge标志，那么恭喜你，你的网站已经运行在符合IE最新标准的标准模式下。若是显示不是Edge，那么你的网站是在兼容模式下渲染。

若是你的网站是被看成兼容模式渲染，那么多是存在如下问题：web

DOCTYPE无效或者缺失

检查是否使用了有效而且格式正确的DOCTYPE。若是你的网站是采用HTML5标准的网站，请使用标准HTML5的Doctype声明：。小程序

<!DOCTYPE html>

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

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

<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相关的资源和工具，有兴趣的童鞋能够深刻了解。

附录

微软Web技术培训网站：http://te-webtraining.azurewebsites.net/cn/index.html
Edge开发者中心：http://dev.modern.ie/
Web兼容性白皮书下载：http://pan.baidu.com/s/1pJiNEVD
Web打包成Windows商店应用工具：http://www.manifoldjs.com/
Web远程调试工具：http://vorlonjs.com/