Web Devout tidings

Internet Explorer 7.0 came out October 2006, and web developers around the world panicked. Many sites had relied on CSS hacks to make Internet Explorer 6 fall into line, but with Internet Explorer 7’s not-quite-exhaustive fixes for some of the bugs which made the hacks possible and some of the bugs the hacks were used to fix, many of those sites ended up breaking in the new version. Web developers had to scramble to get the sites patched up, and it was a frustrating experience for many.

Fortunately, the Internet Explorer development team at Microsoft has learned from this experience. Starting with the next version, currently codenamed IE.next, it should be up to the web developers to opt into the new improved standards support which is responsible for breaking previous hacks. For websites which haven’t opted in, IE.next will (for the most part, at least) try to display the site just like IE 7 did. Microsoft hasn’t yet finalized the details on exactly how web developers would opt in (probably through some kind of special HTML comment), but that isn’t what this article is about. This article is about preparing your current site to minimize the chances of breaking when the next version of Internet Explorer is released.

There is really only one big issue to cover. By default, IE.next should treat your webpage exactly as IE 7 does now: current CSS bugs will still exist, current CSS hacks will still work, etc. The only difference might be Internet Explorer’s version number. But that’s exactly where trouble might occur. If you use version-specific conditional comments like many people do, then pay attention.

Let’s say your site currently requires some CSS hacks for IE 7, and you include a special stylesheet using a conditional comment with the [if IE 7] condition. IE.next (which might end up being IE 8) wouldn’t get the IE 7 stylesheet, would it? The IE development team might end up deciding to make some special exceptions for this, but for the moment we’ll have to assume that this could cause some problems. Since IE.next would have the same bugs as IE 7, it would require the same CSS hacks IE 7 does. But if you use the [if IE 7] or [if lte IE 7] condition, IE.next wouldn’t receive those hacks and would make casserole out of your site.

The solution is easy: For any conditional comment that specifically selects IE 7, you should also include all future versions. Here are the changes you’ll need to make:

• [if IE 7] → [if gte IE 7]
• [if lte IE 7] → [if IE]
• [if lt IE 8] → [if IE]
• [if gt IE 7] → Unless you’re already aware of the IE.next changes and are opting in for the new standards support, you should never use this condition. Just get rid of the conditional comment and its contents.

Keep in mind that if you deliberately opt in for the new standards support, then you may very well want to separate IE 7 from future versions. The above conversions are just for sites that are already made or will be made before we can reasonably consider opting in.

There’s a possibility that future versions of IE will pretend to be IE 7 for the conditional comments when you haven’t opted in, but the above conversions are still safe to make in that case.

If you do this, and if Microsoft implements the opt-in system into IE.next as they have described, then your site has a very good chance of working in future versions of Internet Explorer without requiring any additional changes. There are, however, no guarantees, and it’s still important to check the site in the new version of IE once it’s released, which will probably be in late 2008 or early 2009.