META Tags and Locking in Future Compatibility
Document compatibility is an important concern for Web developers. Windows Internet Explorer 8 introduces document compatibility modes that allow Web developers to tell the browser to render their pages in the same way as older versions would, thereby allowing the developer to choose when to update.
This document describes the document compatibility modes supported by Internet Explorer 8 and explains how they may be implemented on a per-page or per-site basis by using custom headers. By implementing the appropriate compatibility mode, a site can ensure compatibility with Internet Explorer 8 and beyond.
Different Compatibility Modes
Internet Explorer 8 supports many compatibility modes that enable different supported features and affect the manner in which content is rendered. For example,
IE5 mode renders content as if it were displayed by the Windows Internet Explorer 7 Quirks mode, which is very similar to how Microsoft Internet Explorer 5 displayed content.
IE7 mode renders content as if it were displayed by the Internet Explorer 7 Standards mode, whether or not the page contains a <!DOCTYPE> directive.
EmulateIE7 mode tells Windows Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 Standards mode, and Quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, EmulateIE7 mode respects the <!DOCTYPE> directive. For many Web sites, this is the preferred compatibility mode.
EmulateIE8 mode is similar to EmulateIE7 mode; Internet Explorer uses the <!DOCTYPE> directive to determine how to render content; however, standards mode directives are displayed in Internet Explorer 8 Standards mode. Quirks mode directives are displayed in IE5 mode.
IE8 mode provides the highest support available for industry standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API, as well as limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft).
Edge mode tells Windows Internet Explorer to display content in the highest mode available, which actually breaks the “lock-in” paradigm. With Internet Explorer 8, this is equivalent to IE8 mode. If a (hypothetical) future release of Internet Explorer supported a higher compatibility mode, pages set to Edge mode would appear in the highest mode supported by that version; however, those same pages would still appear in IE8 mode when viewed with Internet Explorer 8. It is recommended that Web developers restrict their use of Edge mode to test pages and other non-production uses because of the possible unexpected results of rendering page content in future versions of Windows Internet Explorer.
By default, Internet Explorer 8 uses EmulateIE8 mode to display pages loaded from the Internet Zone. Web pages loaded from the Intranet Zone or with the Web Browser control are displayed in EmulateIE7 mode. These defaults can be changed
Specifying Compatibility Modes on a Per-Page Basis
To specify a document mode for your Web pages, use the META element to include an X-UA-Compatible http-equiv header in your Web page. The following example specifies EmulateIE7 mode compatibility.
<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<title>My Web Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
The content attribute specifies the mode for the page; for example, to mimic Internet Explorer 7 behavior, specify IE=EmulateIE7. Likewise, specify IE=5, IE=7, or IE=8 to select one of those compatibility modes. You can also specify IE=edge to tell Internet Explorer 8 to use the highest mode available.
The X-UA-compatible header is not case sensitive; however, it must appear in the Web page's header (the HEAD section) before all other elements, except for the TITLE element and other META elements.
Specifying Compatibility Modes on a Per-Site Basis
A document mode can be specified for your Web site by defining a custom HTTP response header for the site using your Web server. An HTTP response header is the information a Web server attaches to the file it sends to your browser in response to the HTTP request and that usually contains information such as date, size, and type of file that is being sent back.
The following documents describe the steps required to configure your Web server to attach a custom HTTP response header to all of your Web pages. This will cause Internet Explorer 8 to use a specific document compatibility mode, such as EmulateIE7.
If you specify a default document compatibility mode using your Web server, you can override that setting by specifying a different document compatibility mode in a specific Web page. The mode specified within the Web page takes precedence over the mode specified by the server.
Determining Document Compatibility Mode Using Script
To determine the document compatibility mode of a Web page using Internet Explorer 8, use the documentMode property of the document object. For example, typing the following into the Internet Explorer 8 Address bar displays the document mode for the current Web page.
javascript:alert(document.documentMode);
The documentMode property returns a numeric value, corresponding to the page's document compatibility mode. For example, if a page has chosen to support IE8 mode, documentMode returns the value 8.
Note: The compatMode property introduced in Windows Internet Explorer 6 has been deprecated in favor of the documentMode property introduced in Internet Explorer 8. Applications that currently rely on compatMode will continue to work in Internet Explorer 8; however, they should be updated to use documentMode.
If you wish to use JavaScript to determine a document's compatibility mode, include code that supports older versions of Windows Internet Explorer, as shown in the following example.
engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
// This is an IE browser. What mode is the engine in?
if (document.documentMode) // IE8
engine = document.documentMode;
else // IE 5-7
{
engine = 5; // Assume quirks mode unless proven otherwise.
if (document.compatMode)
{
if (document.compatMode == "CSS1Compat")
engine = 7; // standards mode
}
}
// The engine variable now contains the document compatibility mode.
}
The document object used here represents the HTML document in a given browser window and can be used to examine, modify, or add content to an HTML document and to process events within that document.
Determine Document Compatibility Mode Using Conditional Comments
If only targeting Internet Explorer, the following code example illustrates how to use conditional comments to target current or legacy versions.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<!--[if gte IE 8]>
<style type="text/css">
body {
color: #0000ff;
background-color: #000000;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css">
body {
color: #000000;
background-color: #ffffff;
}
</style>
<![endif]-->
</head>
<body>
<h1>
<!--[if gte IE 8]>
Chapter 1.
<![endif]-->
First Chapter
</h1>
<h1>
<!--[if gte IE 8]>
Chapter 2.
<![endif]-->
Second Chapter
</h1>
Text any version will see.
</body>
</html>
For more information on versioning and Windows Internet Explorer modes, see Defining Document Compatibility.
Controlling Default Rendering
When Internet Explorer 8 encounters a Web page that does not contain an X-UA-Compatible header, it uses the <!DOCTYPE> directive to determine how to display the page. If the directive is missing or does not specify a standards-based document type, Internet Explorer 8 displays the page in IE5 mode (quirks mode).
If the <!DOCTYPE> directive specifies a standards-based document type, Internet Explorer 8 displays the page in IE8 mode, except in the following cases:
· Compatibility View is enabled for the page.
· The page is loaded in the Intranet zone and Internet Explorer 8 is configured to pages in the Intranet zone in Compatibility View.
· Internet Explorer 8 is configured to display all Web sites in Compatibility View.
· Internet Explorer 8 is configured to use the Compatibility View List, which specifies a set of Web sites that are always displayed in Compatibility View.
· The Developer Tools are used to override the settings specified in the Web page.
· The Web page encountered a page layout error and Internet Explorer 8 is configured to automatically recover from such errors by reopening the page in Compatibility View.
For more information, see Internet Explorer Blog: Compatibility View Recap.
Note When configured to load Intranet pages in Compatibility View, Internet Explorer makes an exception for pages loaded using the localhost address or a loopback address. Pages loaded using one of these techniques are displayed in IE8 mode when the <!DOCTYPE> directive specifies a standards based document type.
In addition, the following registry key allows you to control the way Internet Explorer handles pages that do not contain X-UA-Compatible headers.
HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
SOFTWARE
Microsoft
Internet Explorer
Main
FeatureControl
FEATURE_BROWSER_EMULATION
iexplore.exe = *(DWORD)
The DWORD value must equal one of the following values.
· 7000: Pages containing standards-based <!DOCTYPE> directives are displayed in IE7 mode.
· 8000: Pages containing standards-based <!DOCTYPE> directives are displayed in IE8 mode
· 8888: Pages are always displayed in IE8 mode, regardless of the <!DOCTYPE> directive. (This bypasses the exceptions listed earlier.)
By default, applications hosting the WebBrowser Control open standards-based pages in IE7 mode unless the page contains an appropriate X-UA-Compatible header. You can change this by adding the name of the application executable file to the FEATURE_BROWSER_EMULATION feature control key and setting the value appropriate for the desired behavior.