Making Your Web site Compatible Across Multiple Versions of Internet Explorer

Improved standards support in Internet Explorer 8 Beta 2 makes developing sites that work across browsers simpler and less time consuming. The latest release of the world’s most popular Web browser includes upgrades to the Web platform, compatibility, and functionality designed to keep you on-point creating high-quality interactive experiences, not debugging browser interop issues. Let’s discuss how to best take advantage of these new features while ensuring your Web pages continue to work correctly in older browsers.

Internet Explorer 8 Beta 2 interprets Web content in the most standards-compliant way it can. This simple statement turns out to have complex overtones. With compatibility expectations growing, new features need to be balanced against costs associated with updating legacy content. Thankfully, Internet Explorer delivers a model that both protects current content from client changes and enables adoption of new exciting features.

Have you always wanted to write content according to the latest Web standards and have it “just work” in multiple browsers? With the improved standards support found in Internet Explorer 8 Beta 2, you can. The latest release now provides improved support for CSS 2.1, HTML 4.01, HTML 5, CSS 3, DOM L1 and L2 Core, and Aria.

Do you have existing content that “just works” in Internet Explorer 7 that you want to continue to display correctly in Internet Explorer 8 Beta 2? Don’t worry, that’s covered too.

Choosing the Best Layout Mode

As a point of background knowledge, modern browsers ship with at least two layout modes Quirks and Standards (most ship with more, but I’ll get into that later). Quirks mode denotes compatibility with older Web pages, in particular those written before modern standards. For instance, the box model, a general term describing sizing and positioning of elements on a page, is quite different in these older pages than those written according to the latest Web standards. Standards mode denotes compatibility with the latest and greatest Web standards.

Standards mode is, as you might expect, a moving target as the latest Web standards keep evolving and changing. For instance, Internet Explorer 8 Beta 2’s definition of Standards mode is different than Internet Explorer 7’s definition of Standards mode. Firefox 3’s definition of Standards mode is different than Firefox 2’s definition of Standards mode. And, Internet Explorer 8 Beta 2’s definition of Standards mode is different than Firefox 3’s definition of Standards mode. Differing interpretation of Standards is the cause of most cross-browser issues encountered in Web design.

So you might ask, why would I ever choose Standards mode if there is compatibility risk? For one, Standards bring new functionality. Internet Explorer 8 Beta 2 includes full support for CSS 2.1, which means a whole set of previously unavailable features are at your fingertips. Take, for example, the common case of dividing a page up into chapters and sections. By using the ‘counter’ property you can save yourself a great deal of effort in automatic numbering situations that require a bit more complexity than the standards ordered list. Listing 1 shows an example and Figure 1 shows expected output. Note that without counters you would have to number the chapters and sections in this example manually, and what a pain it would be to insert a new chapter between the first and second chapters!

For another, Standards provide consistency across browsers. Internet Explorer 8 Beta 2 also includes improved support for items defined in other Web standards such as HTML 4.01, HTML 5, CSS 3, DOM L1 and L2 Core, and ARIA.

All told, these improvements make up the bulk of new features found in the Internet Explorer 8 Standards mode.

DOCTYPEs and <META> Tags

Internet Explorer determines layout mode by examining the DOCTYPE tag declared in a Web page’s HTML. This action occurs during page load-the Web browser “sniffs” the DOCTYPE and then switches into the appropriate layout mode, Quirks or Standards, in order to display the page correctly (read: as the author likely intended). Visit MSDN to see a list of DOCTYPEs and what layout mode they trigger (http://msdn.microsoft.com/en-us/library/ms535242.aspx).

Recognize that a ton of existing content (on the Internet / various intranets / line of business apps / etc…) that uses a Standards mode DOCTYPE has been coded not to W3C Standards explicitly but to Internet Explorer 7’s interpretation of Web standards. To allow such sites to continue to work in Internet Explorer 8 Beta 2 you have two options:

• Update content to support Internet Explorer 8 Beta 2’s interpretation of Web standards and special case older versions of Internet Explorer as required (preferred).
• Tell Internet Explorer to interpret Standards mode content as content authored for Internet Explorer 7’s interpretation of Web standards.

Developing Standards Mode Pages

So you want to develop Web pages according to the latest Web standards? Me too! Here’s what you need to do:

1. Author your page according to the latest Web standards as supported by Internet Explorer 8 Beta 2.
2. Include a Standards mode DOCTYPE.
3. Use conditional comments to provide fix-ups for legacy versions of Internet Explorer.

Step #3 is necessary only if your markup takes advantage of new functionality that didn’t exist in previous versions of the browser or in instances where behavior has been corrected or improved in the latest Internet Explorer version.

For those unfamiliar with power of conditional comments, basically think of them as “if” statements within your HTML. The code contained within a conditional comment block is only exercised if the expression evaluates to TRUE. The expression generally takes the form of a declared Internet Explorer version value and a comparison is performed against Internet Explorer’s Version Vector registry key.

In the following example, note how using conditional comments allows you to direct different style sheets to Internet Explorer 8 Beta 2 and Internet Explorer 7 respectively:

Or, better yet, take advantage of the complete CSS 2.1 support in Internet Explorer 8 Beta 2 to feed the same style sheet to all modern browsers and reserve conditional comments only for down-level browsers.

Some finer points to keep in mind. First, unless you are already an expert on Conditional Comments, it pays to review the sample code and syntax on MSDN (http://msdn.microsoft.com/en-us/library/ms537509.aspx). Second, if you want to feed Internet Explorer 8 Beta 2 and Internet Explorer 7 the same content, use a greater than or equal to comparison that targets both versions in a single declaration, such as:

By: Scott Dickens

Scott Dickens is a Lead Program Manager at Microsoft, based in Redmond, WA.

Scott works on several features of Internet Explorer including layout, versioning and modes, rendering, graphics and images, text, printing, zoom, and Web site compatibility.

sdickens@microsoft.com