Internet Explorer 7 – The State of Play

An earlier version of this article appeared in the SitePoint Tech Times #160.

In the Tech Times #158, I asked for your experiences adapting sites to support the newly-released Internet Explorer 7. Here are a couple of interesting responses I received, along with some information that might help you to deal with this new browser.

From Angela (emphasis mine):

“I tend to stick pretty closely to the standards recommendations, and test pretty thoroughly, so I didn’t find a lot of surprises with IE7 (It probably helps that I’m a pessimist!). Conditional comments make it easy and intuitive-ish to deal with problems. I’m not a fan of IE by any means, but IE7 hasn’t been as nasty as it could’ve been.”

Conditional comments are definitely the way I choose to approach CSS issues in Internet Explorer, Angela. For the uninitiated, I covered conditional comments back in the Tech Times #131. In short, however, conditional comments let you apply additional style sheets to particular versions of Internet Explorer by using a special form of HTML comment that Internet Explorer will process, while other browsers and development tools will ignore them:

<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styles.ie.css" />
<[endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="styles.ie6.css" />
<[endif]-->

In the above code, most browsers will only apply styles.css to the page. Internet Explorer browsers, however, will also apply styles.ie.css to the page. Additionally, Internet Explorer versions prior to IE7 will also apply styles.ie6.css to the page.

A number of developers in the community have objected to the use of conditional comments. Instead, they advocate the use of CSS hacks like * html (more on this in a moment). There are several reasons for this:

• Conditional comments require you to add extra HTML markup to your
  pages to solve what is really a CSS problem.
• Conditional comments separate your IE-specific CSS code from your normal CSS, making it difficult to see what styles are applied to a particular element at a glance.
• Conditional comments are invisible to many development tools (like the W3C CSS validator), making them tricky to work with.

And indeed, if all you need to do is apply specific styles to Internet Explorer browsers prior to IE7, then the * html hack can be a very clean solution:

div.thingo {
  float: left;
  margin-left: 1em;
}
* html div.thingo {
  display: inline; /* Fix double float margin in IE6 */
}

In Internet Explorer 6 and earlier, the browser mistakenly believes that the html element has a parent, which can be matched with the universal selector (*).

The nice thing about this particular hack is that the CSS code it uses is perfectly valid—it simply relies on a bug in IE6 to process it differently.

A similar hack can also be used to target IE7.

In most cases, it comes down to a matter of personal preference. The one thing that conditional comments have going for them is a predictable future. I know with reasonable certainty how my conditional comments will behave in future versions of Internet Explorer, whereas with CSS hacks there is the very real possibility that IE8 will fix the problem that makes the hack work, but not the problem that the hack has been used to work around.

From Mary Ranson:

“I try to keep my CSS straightforward and I’ve avoided hacks. My sites work well enough in IE7 to pass muster. Having said that, IE7 does add to the variety of different renderings in a way that I do not find helpful, just because a page works for IE7, doesn’t mean it will work for IE6. Since IE7 won’t install on older versions of Windows, I’m expecting IE6 to continue to represent a significant proportion of users for longer than previous versions.”

This is a very good point. Microsoft has claimed that they expect the automated update system in Windows XP to lead an unprecedented uptake of the new browser. While this is proving to be true, the vast number of aging Windows 2000 and Windows 98 boxes in the slow-moving institutions of the world may not make the move to IE7 for years.

Thankfully, this time Microsoft has also handed us a free, practical tool for side-by-side testing in IE6 and IE7: Virtual PC 2007. Download and install this free software on your Windows XP or Windows Vista system, then grab Microsoft’s free virtual machine image containing Internet Explorer 6 (complete with the IE Developer Toolbar) running on a pre-activated copy of Windows XP. Now you can have IE7 installed for your primary development and testing work, and then when it comes time to test in IE6, just fire up Virtual PC and type in the URL!

The copy of Windows XP included in the virtual image is set to expire on April 1st, 2007, but from Microsoft’s announcement it looks like they’re planning to update the image before that date.

I’d really like to see Microsoft release a free virtual machine containing IE5.5 for those of us still interested in providing some support for that browser. But this solution for IE6 testing alone is a huge weight off the shoulders of web designers, who would previously have to keep a spare machine around (with an extra Windows license) to test that browser.

By the way, if you’re wondering why I haven’t mentioned the “standalone” versions of Internet Explorer that you can download from places like evolt and Tredosoft, it’s because these are not adequate for in-depth browser compatibility testing. Specifically, these standalone versions all use the current (latest) version of JavaScript installed on the system, not the versions of JavaScript that these older browsers actually come with. Alex Russell has an excellent blog post on the subject.

Thankfully, Virtual PC 2007 does it all, and does it for free! The only downside is that it requires Windows XP Professional (not XP Home) or Windows Vista Business, Enterprise, or Ultimate (not Home or Home Premium), so if your operating system isn’t what Microsoft considers “developer grade,” you’re out of luck.

Update on the Windows XP Home issue: I’ve been informed by several people that Virtual PC 2007 does indeed run on Windows XP Home — it simply isn’t supported by Microsoft in that configuration. Apparently if you ignore the warnings during installation, it works just fine.