当前位置: IEfans/IE专区/IE动态/modern.IE - 兼容性检测工具背后的技术真相

modern.IE - 兼容性检测工具背后的技术真相

IE动态互联网 2013-02-08 阅读(2616)

我们最近发布了 modern.IE，开发人员可通过这组工具来测试自己的网站在新一代的 IE9、IE10或旧版浏览器上的效果，modern.IE 的程序侦测精灵(code detection wizard)能够扫描并辨识出可能影响使用体验的常见错误，通过结合 BrowserStack.com 和 chrome/Firefox 的附加组件，我们提供了三个月的免费跨浏览器测试服务，不论开发人员用的是何种设备都能测试各种平台的浏览器。上次在博客上的文章中已经说明了 modern.IE 的目的以及对开发人员的帮助，而今天我们将介绍一些更技术面的细节，以及我们为何选择了这些要素。 搜索常见程序错误 (仍为 BETA版) 先从网页的工具精灵开始谈起吧，我们的目的是希望减少开发人员在测试 IE 上的时间，并协助开发社群才用相同的标记(markup)，我们当然无法涵盖所有现代网页编写范例，因此我们着重于十项重点，而大致上可分为以下三大类：支持旧版IE造成的问题、提升跨浏览器支持的效果、结合Windows 8的全新功能。 第一类：解决支持旧版IE常见问题 1. 已知的兼容性问题 ─ IE 的每个版本都会经过工程团队的测试，确保一些有吸引力的人气网站都能在最新版的 IE 上完整且精彩地呈现，我们会主动联系开发人员并提供免费的协助以解决问题，现在只要通过这个网页精灵，开发人员便能轻松取得兼容性资料或是直接与我们联系，这样一来就可节省在MSDN翻阅文件的时间。 2. 兼容性模式 ─ 兼容性检视清单(CV list)会点出因旧版浏览器语言所造成新一代浏览器(IE10,IE9)的相容问题，但开发人员却不一定知道自己的网页在何时、何地、及为何上榜，而兼容性检测小帮手(Compat Inspector)便能解决这个问题，只要网站在清单上，就能通过这套自动化的 JS 工具来移除旧版标记，使自己的网站与新一代 IE 相容。 3. 网页标准docmode ─ 这项工具能搜索 DocType markup code，使浏览器能接受现代网页标准如 HTML5、CSS3，旧版的 docmodes 则会使网页以 IE8 模式呈现，而这将影响网站效能并提升开发人员为现代浏览器编写网页的难度。 4. 网页框架与程序库 ─ 旧版网页范本一样可能会导致兼容性问题，这类的测试内容主要集中在jQuery、jQuery UI、jQuery Form、SWFObject、MooTools、Modernizr、Prototype.js 等，皆是从热门网站归纳出容易造成兼容性问题的程序库。而目前许多网页框架与程序库就跟 Internet Explorer在内的很多浏览器一样，皆已改才自动更新的方式。 第二类：使网站在不同的浏览器与设备上皆有优异表现 5. CSS-prefixes ─ 测试因CSS code缺少特殊代理程序的 prefixes 造成的兼容性问题，特别是针对移动装置平台，开发人员皆可参考特殊语法实践范例以避开这些常见问题。 6. 不使用插件 ─ 在 IE10 中，我们制订了 IE10 无插件版本，因为这是股新兴的趋势，而开发人员则必须提供使用者相对适合的体验。这项测试能辨识网站是否才用 Adobe Flash 或其他在移动版浏览器(如Surface或iPad)可能会有问题的插件，若有侦测到插件就会建议将网站加至 Flash CV 清单，或试着打造免插件网站。 7. 互动式网页设计 ─ 这是现在网页的设计趋势。我们可以侦测网站是否使用媒体查询(Media Queries)，这项技术常用于侦测设备屏幕的大小并自动因应进行调整，使网站画面能完美呈现在不同屏幕尺吋的设备上，目前有许多不同种类的互动式设计，故此项测试主要用以提醒目前现代化的网页可以使用的设计方式。 8. 功能侦测 ─ 当您需要支持众多浏览器时，测试精灵能建议何时该以功能侦测而非浏览器侦测，功能侦测虽然不是必要的要素，但却能省下手动测试各种浏览器版本的时间。 第三类：善用 Windows 8 新功能 9. 触控浏览功能 ─ 当使用者使用支持触控的浏览器时，便可以调整默认的行为设定，如此一来，浏览器便能支持双指缩放或双击等触控手势。 10. 开始画面的固定网站动态磁贴 ─ 测试精灵会建议开发人员将网页标志(logo) 作为 Windows 8 开始画面的动态磁贴图标。使用者就可将网站「固定」至开始画面，就如同像 Windows 应用市场 App 一样。目前网页测试精灵现在仍在 BETA 阶段，我们希望能通过开发社群的协助，在接下来几个月内持续进行改良，modern.IE 现阶段仅针对网页代码进行静态扫描，虽然这有助于提升网站效能，但若遇到开发人员使用条件码(conditional code)或浏览器侦测技术时，便可能无法取得完整的结果。我们非常欢迎您提供任何有助于IE网站测试的建议。 Internet Explorer测试虚拟选单 虽然新一代的 Internet Explorer 都已才用自动更新，但仍有许多使用者停留在 IE8、IE7甚至 IE6 等旧版本，测试这些版本的方式最直接的当然就是保留运行旧版 Windows 与 Internet Explorer 的电脑，或您也可以才用 Microsoft Download Center 提供的虚拟化映像。然而，modern.IE 则提供了两种更简单的方式： 主机托管虚拟化 云端或主机虚拟化服务能解决维护旧电脑或测试映像档的困扰，通过 BrowserStack 就能直接从自己的浏览器测试网站，我们与 BrowserStack 合作的三个月的免费服务包含了 Windows 环境测试服务(IE、Firefox、Safari、Chrome、Opera 的大部分版本)，若网站无法通过 IP 或 DNS 公开连结，您也可以通过 BrowserStack 进行本机服务器测试。以下是 iefans.net 在 Windows XP 与 IE6 中开启的截图：

这样的优惠非常棒，只要注册 modern.ie/test 的服务，便能取得上述的三个月免费服务，您只要在接下来的一年内启用即可(2014 年 1 月 10 日前需登入网站启用服务)。我们也提供了 Chrome 与 Firefox 的附加组件，让测试 IE 变得更简单。 本机虚拟化 我们也更新了虚拟机映像，现在已包含了 IE 与 Windows 操作系统，以及下列平台中IE6 至 IE10 的版本：