Channels ▼

Web Development

Microsoft Launches Modern.IE Cross-IE Testing Toolbox

Microsoft is announcing the launch of modern.IE, a free new toolbox and set of resources designed to make it easier for web developers to make their sites work across all versions of Internet Explorer. As part of this news, Microsoft is partnering with BrowserStack to offer developers use of its virtual browser testing site free of charge for three months, for any browser and on any OS.

There are two things that contribute to the problems developers face when testing for cross-browser compatibility, says Microsoft: old browsers — past versions of Internet Explorer like IE8/7/6 require "a lot more testing" because they don't use modern HTML5 web standards that work in many browsers; and second, developer access — programmers don't (typically) have a simple way to access modern (and older) versions of Internet Explorer.

Learning From Past Mistakes

Redmond admits that at the time of the release of IE9, the team made a commitment to developers to "learn from past mistakes" and so they adopted automatic updates in December 2011.

"We began to offer Platform Previews for developers to provide feedback; and we adopted modern standards as outlined by the W3C. With IE10, we've continued that commitment, adding significantly more HTML5 web standards, cutting edge performance, and multi-touch support. We also offered lessons learned, code, and best practices with each project we work on. We continually check in with developers and hear loud and clear that they like the direction that IE is headed. But the need to support older browsers is holding them back," says Microsoft.

modern.IE is positioned as part of the firm's commitment to web developers focused on Explorer. As such, it launches with a diagnostics wizard that searches a site's code and suggests some ways to help; a new method to test a site in any browser regardless of what platform a developer codes with; and also, a compilation of the best practices Microsoft itself says it has heard from listening to developers.

NOTE: The list has been moderated by two coding experts that Microsoft trusts to help developers: Dave Methvin, president of the jQuery foundation, and Rey Bango, Redmond's own technical evangelist and former member of the jQuery Project.

"We wanted to make a simple way for developers to get immediate feedback on common problems in supporting older versions of Internet Explorer and suggest ways that can make it easier to support many modern browsers, too. Our commitment here is to provide more transparency. By no means does the tool cover everything that it takes to build cross-browser sites, but it begins with the most common things that hold developers back and suggests enhancements that would help," says Microsoft.

Features here include:

  • A bug catcher that checks a site against the list of known IE bugs that Microsoft routinely tests for.
  • A compatibility indicator that sees if a site is on the current list of known compatibility-view-listed sites (indicating there is a known incompatibility with IE9 or IE10 due to code that was created for older versions of IE).
  • A plug-in finder that determines if a site is running Flash or other plug-ins that might not work in the Windows 8 user interface version of IE10 or other modern browsers (especially on mobile screens).
  • A modern frameworks test that ensures the site's frameworks and libraries aren't outdated and causing compatibility problems.
  • A standards Docmode test to make sure the site has a DocType that recognizes modern web standards like HTML5 and CSS3.

Modern Feature Detection Test

There is also a CSS test that detects compatibility problems caused by browser vendor-specific prefixes; a modern responsive design test that checks if the layout can work across screen types (including mobile); a "modern feature detection test" that focuses on feature detection over browser detection.

The site diagnostics also suggests some ways that developers might enhance their site experiences in Windows 8: a touch test to see if there are opportunities to take advantage of multi-touch browsing; and a Windows 8 test to see if there are any capabilities developers can add to take advantage of the new OS — like site pinning, which puts the site on the start screen right next to apps.

While the ins and outs of the diagnostics are technical, Microsoft says that "key takeaway" here is that developers will have a one-stop-shop to test their site and have a simple list of items they could implement to enhance their site for the modern web.

An Open Source Future?

"We plan to make continual enhancements to the tool based on what is most helpful to developers — even making it open source and community-supported in the future," says Microsoft.

Additionally, the firm is making available local versions of Internet Explorer and Windows that can be downloaded and virtualized for testing, even on Mac, Linux, or PC.

For more on Windows programming, it is the focus of the March 2013 issue of Dr. Dobb's Journal: Understand the new Win8 socket API, prevent XSS attacks in ASP.NET Web apps, refresh your knowledge of atomic operations, and more! Download the PDF.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.