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.
Browser Mode
Description
IE9
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.
IE8
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.
IE7
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.
Document Mode
Description
IE9 Standards
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.
IE8 Standards
This behavior matches IE8 when it renders a webpage that has a strict or unknown doctype.
IE7 Standards
This behavior matches IE7 when it renders a webpage that has a strict or unknown doctype.
Quirks
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=______”
Description
EmulateIE9
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
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" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
</head>
<body>
</body>
</html>
You can achieve this result for many pages at once by changing the HTTP header to add this logic to some or all pages on Apache servers or IIS servers.
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="https://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.
UA String
Conditional Comments evaluate against this Version Vector
IE9
9
Compat View
7
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!
Marc Silbey
Program Manager
Comments
Anonymous
June 16, 2010
It's a great work. (9) will be a reborn. In my advice, you should remove COM and OCX in 9-mode. It's needless in modern web sites. please, please!Anonymous
June 16, 2010
The comment has been removedAnonymous
June 16, 2010
Your example is a good one and shows why "same markup" is exactly the right thing to describe as the goal. They're not over-promising or misleading, they're being precise. Anything that claims "standards compliance" is basically a lie, because there are so many different standards, and many of them contradict one another. "Same markup" on the other hand, is a proper aspiration: web developers can write the same content and have it run the same way in different browsers.Anonymous
June 16, 2010
Determining Document Mode diagram for IE9 links to: file:///%5C%5Cbigshare%5Ciefiles%5Cusers%5Cmarcsil%5CIE9Compat%5CSVG%20Diagram%20for%20IE9%20Doc%20Mode%5CHow%20IE9%20Determines%20Document%20Mode.svg the SVG and PNG links work...Anonymous
June 16, 2010
Of course conditional comments work across all browsers: in non-IE browsers they are just HTML comments and so correctly ignored - however I do agree they should only be used to load legacy stylesheets. Scripts should use feature detection to allow for progressive enhancement/graceful degradation. And by the way posting comments seems to be broken in Firefox...Anonymous
June 16, 2010
When a website is on the compatibility list maintained by Microsoft and sends "X-UA-Compatible: IE=edge", then IE8 renders the website using "IE8 Compat View" and not "IE8 Standards". There seems to be no way to override this stupid compatibility list and it takes 2 months to get removed from this list (we have been added without being asked). :-(Anonymous
June 16, 2010
@The Real Matt - If you are aware of other standards than what the W3C/Whatwg publishes, I'd like to know what they are.Anonymous
June 16, 2010
IE has always been by first love in term of <a href="developersyogesh.blogspot.com ">developing</a> features are concerned. I would like to know more about the other standards as well related to the IE.Anonymous
June 16, 2010
Rob: Uh, you know that the IETF publishes Internet Standards, right? As well as ISO, ANSI, ECMA, MPEG, JPEG, and dozens of other organizations? Furthermore, you understand that each of these bodies has multiple versions of most standards, some of which obsolete earlier versions, generally without regard to what content may expect the behavior specified in the earlier version? Most of the "standards compliance" we're talking about today relates to "Standards" that aren't-- like HTML5, which is still under active editing.Anonymous
June 17, 2010
The comment has been removedAnonymous
June 17, 2010
I think four modes are too many for one browser. Quirks mode and IE7 mode are OK, but IE8 mode is redundant.Anonymous
June 17, 2010
The comment has been removedAnonymous
June 17, 2010
How is it that every other browser maker can push updates more often, and leave broken implementations (in your case, everything in IE's compatibility modes) to fade into memory, while you take a huge amount of time between releases AND continue to support broken implementations? Until the IE team decides to stop doing that it will continue to release an "innovative" product which is at least 2 years behind the curve.Anonymous
June 17, 2010
Dan: Ask yourself "How is it that Microsoft still has 200% of the browser share of all of their competitors combined?" and you will find that answers your other question. Consumers and businesses want reliable, predictable behavior from their browsers. Getting on a constant and unpredictable upgrade treadmill isn't appealing as it has an unjustifiably low ROI.Anonymous
June 17, 2010
@timeless - thanks, we fixed the link.Anonymous
June 17, 2010
@Matt There are a number of cases where, unfortunately, the standards get it "wrong," aren't specific enough to exactly determine how a browser should act, or are writing for audiences much larger than just web developers and browser vendors (so things aren't tailored to be the best specifically for the web). It is for these reasons that the term "same markup" is much more appreciated. As long as the browser makers get it right and in agreement so that same markup works across the board, then it's good for me. There are a lot of examples of this in standards. I'll remind of you one highly publicized example: HTML5 Video. The spec does not (currently) identify which codecs to support. So while multiple browsers might support the standard, that doesn't guarantee same markup across browsers if they support different codecs. Using Opera long enough will dreadfully point this out to you as many sites don't work despite Opera being tremendously standards compliant.Anonymous
June 17, 2010
The comment has been removedAnonymous
June 17, 2010
The comment has been removedAnonymous
June 17, 2010
I suggest Microsoft curtail the list of supported compatibility modes in IE9. This will help ensure that users don't upgrade to the new browser and then we web developers don't have to learn to take advantage of all of the shiny new html5 and css3 features in IE9. Also it will help teach users patience because they can use an older slower browser that isn't hardware-accelerated.Anonymous
June 17, 2010
@Meni: Firefox has basic support for document.all in quirks mode: bugzilla.mozilla.org/show_bug.cgiAnonymous
June 17, 2010
@ieblog: I don't quite get why you would need conditional comments in IE9 standards mode. If you really intend to be standards (or single markup) compliant, then perhaps you should only see conditional comments as such in legacy modes, and see them as nothing but plain comments in standards mode? Targeting IE9 or higher by using CC's like <!--[if IE 9]> never made any sense in the past, so there isn't legacy to support in it, so why do you want to support it?Anonymous
June 18, 2010
@Rimas: Conditional comments are an IE feature that can be used beyond just "if IE". You can use them as a mechanism to expose other conditional behavior based on any registered version vector. See msdn.microsoft.com/.../ms537512(VS.85).aspx for more information.Anonymous
June 18, 2010
@Steffen Weber: The X-UA-Compatible value of “IE=edge” can be used to override the Compatibility View list. This tells IE to render the site in the latest Standards mode. If you’re using the meta tag, make sure that it’s in the webpage's header before all other elements, except for the title element. If it still isn’t working, we’d love to find out why and help you get it to work. I’m sorry to hear that you weren’t asked about being added to IE8’s Compatibility View list. We always attempt to contact each site before adding it to the list. I want to make sure that we have the right contacts for your website and that we remove it in an upcoming Compatibility View list update. If you wouldn’t mind, please email us (iepo@microsoft.com) and include a link to the website that “IE=edge” isn’t working for.Anonymous
June 18, 2010
I'm really starting to hate the comments on this blog: my comment AGAIN failed submission! I was saying the new graph is much more clear than before, but I wanted to ask a question: what happens to an application/xhtml+xml document if it contains a X-UA-Compatible mode for an IE version that didn't support that mode? Or, if a website is marked in the MS compatibility database as Compatibility, but calls for that MIME-type?Anonymous
June 18, 2010
@Mitch 74: Thanks. A document that has an application/xhtml+xml MIME type will render in IE9's Standards mode regardless of whether the site is on the Compat View list or uses an X-UA-Compatible value. The same document will trigger a file download on IE8 and earlier versions of IE because application/xhtml+xml is not a recognized MIME type in these versions.Anonymous
June 18, 2010
@Marcsil: Thank you for the reply. I'm already in contact with iepo@microsoft.com and have found out that the X-UA-Compatible header lets you override the "Document Mode" but not the "Browser Mode". We'll be removed from this list in mid August which is still 2 months away... but better than nothing. IMO all these compatibility switches in IE are a total mess. Seeing even more of this stuff in IE9 frightens me.Anonymous
June 20, 2010
@Marc Silbey [MSFT] 1- "(...) for IE9 based on suggestions from the developer community." "We’ve also updated the diagram based on your suggestions." Because of the new blog version, link fragment #9971775 is unretrievable, unreachable, inaccessible. 2- "[meta-tag X-UA-Compatible value] 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." What this IE9 meta-tag X-UA-Compatible value does (functionality) to a webpage contradicts completely and absolutely what you are explicitly encouraging. This meta-tag X-UA-Compatible functionality should always have been compatible with the doctype declaration triggering system. An IE9 meta-tag X-UA-Compatible value in a doctypeless webpage will be rendered in backward-compatible "quirks" rendering mode in all non-IE browsers when it will be rendered in standards compliant rendering mode in IE9: a blatant anti-web-interoperability result and an impredictible one. 3- "we’ve updated the Determining Document Mode diagram for IE9 (in SVG or PNG)" Please clarify everywhere appropriate (diagram, article, blog post, MSDN, books, websites, etc) the difference between <meta http-equiv="X-UA-Compatible" content="IE=9"> and <meta http-equiv="X-UA-Compatible" content="IE=IE9"> . Same thing for <meta http-equiv="X-UA-Compatible" content="IE=8"> and <meta http-equiv="X-UA-Compatible" content="IE=IE8"> 4- In my opinion, this compatibility view button should be removed for IE9. regards, Gérard TalbotAnonymous
June 20, 2010
I hope IE 9 save pages fast like Google Chrome.Anonymous
June 20, 2010
Just great! Now you have to prepare code for four versions of IE! Fantastic! Thank you Microsoft. There will be always work for programmers. Can't wait IE16! Conditional comments and meta headers for 10 browsers! Fantastico ;)Anonymous
June 20, 2010
@EricLaw [MSFT]: I know you can target specific version of IE with conditional comment. The point is, you're advocating single markup here. Conditional comments just don't fit into that picture, and assuming IE9 (in IE9 mode) will be as good as other browsers in terms of compatibility, I fail to see how leaving this feature is desired. Again: I don't suggest to drop support for it whatsoever. My suggestion is to drop its support in IE9 Standards and later modes. CC's are great for fixing layout problems in IE6 and IE7, but if your intentions about compatibility are serious, you just don't need CC's anymore.Anonymous
June 20, 2010
The comment has been removedAnonymous
June 21, 2010
Backwards compatibility is vital to maintain legacy apps until they can be updated. These are bigger issues than whether they look nice. This often has to do with support contracts and guarantees that require use of IE6 or IE7. Use IE8 (or any non-IE broswer) and your support contract is void. When the application in question is customized SAP, well kids, you stick with the older browser since you can't run your business w/o your ERP system. Frankly, IE giving enterprises ways to maintain old stuff until it can be updated or retired is one reason why other browsers don't make much headway in the enterprise space. Simple ways to keep marginal apps and web sites running while newer stuff can take advantage of the newer browser features is a way to ease transition to a newer browser and to avoid budget shocks.Anonymous
June 21, 2010
@Rimas: Sorry, but you're missing my point. Conditional comments can be used to target things OTHER than then Internet Explorer version. You can read the MSDN article to learn more.Anonymous
June 21, 2010
The comment has been removedAnonymous
June 21, 2010
The comment has been removedAnonymous
June 21, 2010
@EricLaw [MSFT]: Thanks for pointing out the fact that I can use other version vectors than just IE's in Conditional Comments. However, I still think it isn't used often for anything but targeting specific IE versions, and doesn't at all go along with the Same Markup paradigm IE devs are now advocating. I still think it could be painlessly dropped from future rendering modes, including IE9 standards.Anonymous
March 21, 2015
addfff