正在阅读：微软Modern.IE助力开发者轻松测试网页兼容性微软Modern.IE助力开发者轻松测试网页兼容性

　　导言：也许网页开发者经常存在这样的困惑，面对浏览器生态不断加快的技术进化速率，开发者很难确定自己的网页能否在浏览器上完美兼容。在过去的几年中，微软一直致力于帮助Web开发者更有效率地进行网页编码和遵守Web标准，现在，为了能够更加方便开发者们的兼容性测试，微软正式推出Modern.IE这套全新的兼容性检测工具，旨在让网页更加完美地呈现于全新的IE10浏览器。

图1

　　过去几年，微软针对此类问题进行了多次尝试。例如，采用系统自动更新让用户升级至最新版的IE浏览器，以适配更现代化的网页；在正式发布前推出平台预览（Platform Previews）版本IE浏览器，提前了解来自开发者的反馈；全面支持HTML5和CSS3等现代网页开发标准，将前沿性能与触控功能相结合。但在与众多Web开发者进行深度探讨后，微软发现想要快速地解决浏览器兼容问题仍是一个巨大挑战，于是Modern.IE系列工具站点便应运而生了（<http://www.modern.ie/zh-cn>）。微软开发平台及事业部平台合作资深经理黄继佳表示：“Modern.IE系列工具的出现，大大简化了开发者的网页测试工作，提升了网页优化的效率，能让开发者将精力放在为用户创造更加精美的网页上来。”

　　Modern.IE系列工具让针对IE10浏览器的Web开发工作变得更加容易，它的一个重要功能即通过输入的URL地址扫描网页中的代码，并找出所有可能影响浏览体验的常见错误。而这些错误由三大分类体现：与旧版IE浏览器产生的兼容性问题，在多设备、跨平台上是否能够正常运行，以及与Windows 8新特性的匹配状况。Windows 8热门应用“板报”的CEO 李晶认为：“过去我们的页面设计和测试团队需要耗费大量精力和时间在网页兼容性测试上，特别是当设计发生细节改变时，几乎所有测试环节都需要重来一遍。在试用Modern.IE系列工具后，我们节约了大量初期测试的时间，将测试的人力和时间放在了最重要的环节上，效率提升了许多。”

图2

　　事实上，仅需几秒钟的等待时间，Modern.IE会自动生成一份检测报告，报告分别从上文中的三大块，来提出改善网站的建议：

图3

　　1. 解决关于兼容旧版IE浏览器的常见问题：

　　已知的兼容性问题：每当IE浏览器进行一次重大版本更新时，微软都会为那些高点击率、具有一定影响力的网站主动进行测试，以避免在新版IE中出现兼容性问题，并帮助他们解决相关问题。通过Modern.IE下的此工具，开发者能够更加方便地访问兼容性检查数据，并可直接联系微软，减少在MSDN社区上搜索修改建议文档所花费的时间；

　　兼容模式：当开发者为旧版IE所编写的网页代码与新版IE浏览器（IE9、IE10）产生兼容性问题时，该网站会出现在“兼容性问题列表”（Compatibility View List）中。而网页开发者自己有时对这一点并不知情，Modern.IE相关工具能帮助开发者确定自己的网站是否存在兼容性问题，如果网站在列表中，那么则会建议使用自动化JavaScript工具来检测并删除网站中的旧标记，进而确保站点与当前版本的IE浏览器兼容；

　　框架（Framework）和库（Library）：众所周知，旧版本的这些网页基础组成部分也会导致兼容性问题。通过研究高点击率网站，微软发现常见的库兼容性问题主要发生在Jquery和Prototype等相关Javascript框架中，而Modern.IE则会对它们进行自动检测，并给出相关的兼容性解决方案；

　　网络标准文档模式（Web Standards Docmode）：用于检索当前网页下的文档类型标记码（DocType Markup Code），该标记码的作用在于通知浏览器遵守HTML5和CSS3等现代Web开发标准。较早版本的标记码将会强制所有版本的IE浏览器均按IE8方式进行呈现，这会严重影响HTML5站点性能 <http://blogs.windows.com/ie/b/ie/archive/2012/06/14/get-30-better-site-performance-in-ie10-with-html5.aspx>，也加大了开发人员编写适用于现代浏览器代码的工作量。而通过Modern.IE下的此工具，这类问题能以较简单的方式解决。

图4

　　2.让您的网页在多浏览器、多设备下更好地运行：

　　CSS前缀（CSS-Prefixes）：此项测试可用于检测当前网页CSS代码中是否缺失特定前缀，进而导致相关兼容性问题。Modern.IE下的前缀检查工具涵盖了包括-Moz(Firefox)、-Ms(Internet Explorer)、 -O(Opera)以及-Webkit(Chrome & Safari)在内的所有主流浏览器；

　　浏览器插件：尽管在全新的IE10浏览器下，微软所提倡的是一个无插件的网络环境，但作为一种新兴的思路，开发者想要完全实现还有些困难。Modern.IE下的此项测试可确定网站是否需要移动设备上（例如Surface或iPad）无法使用的插件。如果检测到插件，该工具将指导开发者如何获得更多有关“构建免插件的网页”的帮助信息，以提供给广大用户一个最佳的浏览体验；

　　响应式Web设计（Responsive Web Design）：作为一种新兴的开发实践，此工具可以检测当前网站是否使用CSS3下的一大新特性Media Queries。该特性允许开发者在不改变内容的情况下，通过改变页面的布局以精确适应不同的设备，在屏幕上显示最佳效果，以加强浏览体验；

　　浏览器检测：Modern.IE通过检测网页编码模式，从脚本中筛选出引用域而不是直接引用网页的结果（类似于第三方分析工具），来推断其是否采用浏览器检测（Browser Detection）技术。在支持多浏览器和多平台时，微软会建议何时使用功能检测来取代浏览器检测，从而简化站点的维护工作。

图5

　　3. 利用Windows 8中的新特性进行再构建：

　　触控浏览（Touch-browsing）：此项Modern.IE测试，会建议当用户使用触控浏览器（如IE10）访问站点时的设置默认行为(Default Behavior)。当用户使用常见触控手势（例如缩放或双击）进行操作时，浏览器就能自动判断出用户将要执行的操作；

　　“开始”屏幕下的站点磁贴（Start Screen Site Tile）：Modern.IE向导为开发者提供了一种将自己的网站Logo贴到 Windows 8开始屏幕磁贴上的新方法，开发者可利用Windows 8下的这些新特性，为用户提供更加个性化的浏览体验。

图6

　　而现在困扰网页开发者的另一个问题是，他们可能需要在多浏览器和跨平台设备上上对站点进行全面的兼容性测试，这大大增强了开发者的测试工作压力。而Modern.IE系列工具为了解决这一难题，直接内置了著名的虚拟网页兼容性测试服务BrowserStack，这样无论开发人员使用何种设备和操作系统，都能用它来测试网页在不同浏览器下的运行状况。值得一提的是，Modern.IE上的BrowserStack专属通道为所有Web开发者提供三个月的免费服务。使用BrowserStack，开发者的测试工作成本将大大降低，任何浏览器测试都可以通过云端完成。

图7

　　为了更方便与BrowserStack服务进行连接，Modern.IE还提供了Chrome与Firefox下的浏览器组件，开发人员只需单击网页中的选项，便能直接连至BrowserStack虚拟测试服务。

图8

　　此外，Modern.IE也考虑到同时使用Windows PC、Mac和Linux等多环境下的网页开发者，为他们统一提供了本地测试用的虚拟机VHD文件。例如Windows 8下的Hyper-V/Virtual PC、Mac下的VMWare Fusion/ Parallels、Linux下的VirtualBox等一系列丰富的虚拟化工具选择，旨在让使用各种平台的Web开发者都能简单的参与到IE 10的兼容性测试中来。

　　通过Modern.IE这类高效的兼容性测试工具，越来越多的Web开发者们将能够更方便的为现代化的IE10浏览器开发出更有活力和更安全的Web产品，而更多更好的Web产品也将吸引更多用户使用IE10浏览器，进而促进IE10浏览器的不断进步。■