The Default Layout Mode

During my talk at MIX 08, I covered more background and detail behind the new IE8 layout mode that provides greater standards support, particularly with regards to CSS 2.1, and version targeting. I’d like to follow-up that talk with a brief post on both points for those that were unable to attend in person.

Clearly there is a lot of momentum behind pushing the web forward (as evidenced, in part, by the lively dialog on this and other blog sites around the web). To this end, we’ve invested in the functionality demanded most by developers and designers – better standards support and cross-browser compatibility. You saw a peak into our progress with the Acid2 announcement a few weeks back. You can see more in the released developer build, which includes support for several CSS 2.1 features not found in previous Internet Explorer releases including the 'inline-table' value for the 'display' property and basic  generated content support (more to follow).

As you may have heard by now, Internet Explorer 8 will ship with three layout modes – Quirks, IE7 Standards, and IE8 Standards. The saying goes: “put your best face forward” and, true to this, Internet Explorer 8 will use its most standards compliant mode, IE8 Standards, as the default when encountering standards content. The behavior looks as follows:

Page Content Declaration

Layout Mode

Known standards DOCTYPEs and unknown DOCTYPEs IE8 Standards
Quirks mode DOCTYPEs (includes the absence of a DOCTYPE) Quirks

Note: A brief discussion on DOCTYPEs can be found on MSDN.

By displaying standards mode pages with our most rigid interpretation, we get closer to that utopia where content may be written once and expected to work in a similar manner across browser types. Keep in mind, however, that progress is often the result of trade-offs. On the one hand, we certainly want to invest in new features, those innovations that entice our existing customers to move to the newest release (and hopefully win us new customers as well). This force is a “push” – we want to move our product, and the community that uses it, forward. On the other hand, we want to ensure that we don’t senselessly break an ecosystem that has come to rely on the behaviors included in our previous releases. This force is a “pull” – causing us to do constrained innovation that specifically takes into account  backwards compatibility. 

The <META> tag attempts to solve this latter point by providing content developers a way in which to signal the desired layout mode regardless of DOCTYPE. This can be particularly useful as a “stop-gap” measure to provide the time required to build and test the latest standards compliant content.

Example:

Scenario: A website contains a standards mode DOCTYPE declaration but is actually giving versions of Internet Explorer, including Internet Explorer 8, non-standard content according to the “current” form of the standard.

Result: Internet Explorer 8 attempts to display the content using IE8 mode, the most standards compliant layout mode, because of the DOCTYPE declaration. The site fails to display correctly and updates to the site are needed.

Actions:

  1. Immediately update site content to ensure that Internet Explorer 8 is provided with standards content fitting the DOCTYPE (preferred).
  2. Defer the site update until the next scheduled maintenance window / period
      • Use the <META> opt-out to signal that Internet Explorer 8 should continue to display the document in a manner similar to Internet Explorer 7, e.g. ‘<META http-equiv="X-UA-Compatible" content="IE=7">. This can be done globally via a host-header or as a per-document edit. This action allows the site to still be usable by Internet Explorer 8 clients.
      • Create site content ensuring that Internet Explorer 8 is provided with standards content fitting the DOCTYPE.
      • Publish the new, standards-compliant content and remove the <META> opt-out.

Note: The <META> tag declaration always overrides DOCTYPE. A deeper discussion can be found in the developer whitepaper.

Another interesting point about the <META> tag is that it more precisely marks the content of a page than the larger bucket labels: “Standards” and “Quirks”. Regardless of whether a browser chooses to use that information today, it does seem like an interesting data point to have in the future...

Scott Dickens
Lead Program Manager

Edit: replaced "pretty print" quotes with regular quotes in META tag info