Running today’s different markup

I want to follow-up on comments from a previous post that asked questions about how many modes and rendering engines are in IE9. It’s worth noting that all browsers have multiple modes. This post is about the different modes in IE9 and the scenarios they accommodate.

First, there is IE9’s Standards mode. It is IE9’s most standards-compliant, interoperable and fastest mode. It includes support for SVG, CSS3, DOM Level 3, and many other standards-based features. This is IE9’s default mode. We want site developers to use this mode as part of getting us all to the goal of running “same markup”. To see IE9’s Standards mode in action, check out the examples on the IE9 Test Drive site.

Many real world sites still rely on legacy modes. IE9 supports Quirks modefor sites such as atlaspost.com, chase.com, and zapak.com. The lack of doctype on these sites indicates that they want to render in Quirks mode. As Peter-Paul Koch points out with a set of test cases, markup that relies on Quirks mode behavior doesn’t always render as intended in other modes.

For example, here’s unibanco.com.br in Quirks mode:

And the same site in IE9 Standards mode:

Some site developers have legacy code similar to this that relies on the behavior of Quirks mode across browsers. IE9 continues to run this markup.

So far we’ve covered IE9’s Standards mode (the most standards-compliant mode) and Quirks mode. There are other sites that rely on IE7-specific behaviors. For example, aapeli.com targets IE7 specifically with its CSS:

​

To make sure that IE9 continues to “just work,” IE9’s engine supports both IE7 Standards mode and IE8 Standards mode. Without these modes in IE9, site developers would have to go back and re-work sites that relied on specific behaviors.

Ultimately we want the same markup to work across all browsers. In the meantime, we want the markup you wrote for IE7 and IE8 to continue to work in IE9. Site developers can add the X-UA-Compatible meta tag or HTTP header to give themselves time to update their sites to use the same markup across browsers.

IE9 supports the four modes described in this post: IE9’s Standards mode (the most standards-compliant mode), Quirks mode, IE7 Standards mode and IE8 Standards mode.

Same markup

Writing sites so that the same markup runs in as many browsers as possible is important. Many sites today use feature and behavior detection to work across browsers and legacy IE versions. Here’s an example from weather.com that shows how IE9 executes the same standards-based markup for DOM Level 2’s getComputedStyle while IE7, IE8 and IE9’s legacy modes will execute the legacy currentStyle markup:

As the above example shows, it’s a good practice to write standards-based markup first and fallback to legacy markup. Stay tuned for a post that describes feature and behavior detection across browsers in much more detail.

To summarize, IE9 is optimized to display sites according to standards so developers can use the same markup. It is also able to display sites in legacy modes if site developers specify that. This means users can continue to use the web and web developers can move forward according to their own schedules.

One of the places where we’d like your feedback is the consistency between IE8 and IE9. For example, are there differences between IE7 Standards mode in IE8 and IE9? Are there differences between the standards-compliant features we shipped in IE8 and the same features in IE9? Check out the Platform Preview and let us know.

Thanks!
Marc Silbey
Program Manager

Click to expand...