IE’s Compatibility Features for Site Developers
Site developers have been clear that they want interoperability and standards compliance (or “Same markup”) for newer technologies as well as backward compatibility for their existing sites. After reading questions and comments on the last few compatibility-related blog posts, I thought now is a good time to recap IE’s compatibility features for site developers.
As IE changes and supports new technologies, developers will still want, in some scenarios, IE’s legacy behavior. There are many different technologies that enable developers to adjust how IE runs their site’s markup. The main ones include the IE Developer Tool’s Browser Mode and Document Mode, X-UA-Compatible Meta tag and HTTP Header, and Conditional Comments. I’ve also updated the How IE Determines Document Modes diagram for IE9 based on suggestions from the developer community.
Browser Mode and Document Mode
Many blog comments asked about the difference between Browser mode and Document mode. There are good articles on MSDN about the Browser Mode and Document Mode menus in Developer Tools. Here’s a recap on how to use these menus to test your website.
The Browser Mode determines what User-Agent (UA) string IE sends to servers, what Document Mode IE defaults to, and how IE evaluates Conditional Comments (More on these topics below). By default, IE9’s browser mode is IE9, and IE8’s browser mode is IE8. As a developer, you can change this in IE’s Developer Tools with the “Browser Mode:” menu item. The user can change this when visiting a site by clicking on the Compatibility View (CV) button manually. Most users opt-in to the CV List that Microsoft updates based on work with the community.
IE9 reports a UA string, version vector, and document mode to match the default browser behavior, which is the most standards-compliant mode in IE9. Use this mode to test how IE9 users experience your site.
IE9 Compatibility View
IE9 reports a UA string, version vector, and document mode, as if it is IE7; however, the UA string also includes the Trident/5.0 token indicating that the browser is really IE9. Use this mode to test how IE9 users experience your site if they click on the Compatibility View button. Note that the Developer Tools in the second IE9 Platform Preview has two Compatibility View options, which is a known issue.
IE9 reports a UA string, version vector, and document mode as if it is IE8. Use this mode to test how IE8 users experience your site.
IE9 reports a UA string, version vector, and document mode as if it is IE7. Use this mode to test how IE7 users experience your site.
The Document Mode dictates what mode IE’s Trident engine will render the markup in such as IE9’s Standards Mode. Changing the Document Mode refreshes the page, but does not resend the UA string or retrieve new markup from the server.
This is the latest standards-compliant behavior available in IE9, and is the default mode used by IE9 to render a webpage that have a strict or unknown document type.
This behavior matches IE8 when it renders a webpage that has a strict or unknown doctype.
This behavior matches IE7 when it renders a webpage that has a strict or unknown doctype.
This behavior matches IE when rendering a document with no doctype or a Quirks doctype. It is similar to the behavior of IE5 and the Quirks mode behavior of IE6, IE7 and IE8.
Changing the Document Mode for your site
As a developer, you determine the document mode that IE will use when rendering your site. By default, it’s the most interoperable and standards-compliant mode, which is IE9’s Standards mode in IE9. You can use the doctype and X-UA-Compatible Meta tag or HTTP Header to change that default as you see fit. You can use the “Document Mode:” menu item in IE’s Developer Tools, to see what mode makes the most sense for your site.
If you want to change the Document Mode for just one specific webpage, the Meta tag is the most convenient way. To change the Document mode for many pages across your site, changing the HTTP header is convenient.
IE9 will support two new X-UA-Compatible values in addition to what IE8 supports:
Meta tag or HTTP header content = “IE=______”
EmulateIE9 tells IE to use the doctype to determine how to render content. Web pages with no doctype or a Quirks doctype are rendered in Quirks mode. All other doctypes are rendered in IE9’s Standards mode.
IE9 tells IE to render in IE9’s Standards mode and ignore doctype.
We’re encouraging site developers to use a standards doctype and no X-UA-Compatible Meta tag or HTTP header when targeting IE9’s Standards mode. This helps us all reach the goal of running the same standards-based markup.
If you have a legacy site that relies on IE7’s interpretation of Standards mode use the X-UA-Compatible Meta tag or HTTP header to target IE7 Standards mode. Here’s an example that combines values so that IE8 renders a webpage in IE7 Standards mode while IE9 renders the webpage in IE9’s Standards mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> </head> <body> </body> </html>
In order to help deliver on the “same markup” goal, there’s one additional change from IE8 to IE9. All iframes within a top-level page rendering in IE9’s Standards mode will also render in IE9’s Standards mode. The only exception is that iframes that specify Quirks mode will render in Quirks mode.
Detect features, not browsers (or, Avoid Conditional Comments)
We want to run the same standards-based markup as other browsers in IE9’s Standards mode. This is why we’re encouraging developers to use feature and behavior detection and the same stylesheets when targeting IE9 and other browsers’ Standards mode.
We strongly recommend feature and behavior detection rather than Conditional Comments, an IE specific feature that other browser vendors have chosen to not implement. Conditional comments will not work across browsers and are not “same markup.”
There is one case where it is appropriate to use Conditional Comments, which is for backward compatibility with IE6 or IE7 stylesheets. For example, websites such as hsn.com use Conditional Comments to load specific stylesheets in IE7 .
<!--[if IE 7]> <link rel="stylesheet" href="http://css.hsn.com/css/ie7.css?v96" type="text/css" /> <![endif]-->
IE9 will continue to support this as part of our commitment to be backward compatible for existing sites. Here are a few rules that will help you apply Conditional Comments:
Conditional Comments are tied to the UA String by default. Using the X-UA-Compatible meta tag or HTTP header enables a page to specify a specific version for compatibility. If an X-UA-Compatible declaration exceeds the version of IE in use (8 in IE8, 9 in IE9) or is less than 7, then the value from the UA String will continue to be used instead of the version declared in X-UA-Compatible value.
The IE version number sent in the UA String is used to evaluate Conditional Comments. This is called the Version Vector. For example, an IE7 UA String will have a Version Vector of 7 and the Conditional Comment <!--[if IE 7]> will evaluate to true. IE9 will only send one of two UA Strings; the IE9 string or the Compat View string.
Conditional Comments evaluate against this Version Vector
To summarize this section, it’s ok to use Conditional Comments to conditionally load CSS that targets IE6 or IE7. Use feature and behavior detection for everything else.
Updated diagram on How IE9 Determines Document Mode
To help illustrate how all of these features work together, we’ve updated the Determining Document Mode diagram for IE9 (in SVG or PNG) with the new X-UA-Compatible values mentioned above. We’ve also updated the diagram based on your suggestions. Thanks!