De-Hacking CSS for IE7 Beta 3

This is an update on my previous post about checking CSS hacks in IE7. I’ll run through a CSS browser check using Ingenious Ireland as an example.

Getting the tools together

When you install Internet Explorer 7 Beta 3, as downloaded from the Microsoft website, Internet Explorer 6 is replaced. This is bad news for web developers who understand IE6 isn’t quite off our backs just yet and want to be able to test easily in multiple browsers.

There are two ways to have both IE6 and IE7 run on the same machine (three if you include Virtual PC but I resent having to install a whole OS just to run a browser!). The first is to install IE7 then a standalone version of IE6 from evolt.org’s browser archive.

The second method is slightly more complicated, involving changes to the registry and startup scripts, but it allows you to keep the default installation of IE6 and run IE7 as a standalone. This is done using either the method described by Jon Galloway or the pre-packaged standalone installer created by Yousif Al Saif.

Whilst IE7 is still in beta, I prefer to keep IE6 installed as the default, so older versions and beta browsers are run as the exception. With this in mind I opt for the second method and use the standalone installer for IE7beta3. Once the final version of IE7 is released (4th Quarter of 2006, allegedly), I’ll switch to the first method; running IE6 as a standalone.

Checking previous hacks

After getting the browser sorted, I want to check through the hacks I implemented for IE6 and see if they still affect IE7.

I keep all browser specific rules quarantined in separate .css files. Much like plague victims. These get included in the top of my main css file. Opening up ie6win.css I can see the various workarounds and hacks I used to bully IE6 into submission.

In my example, all the rules use the invalid * html selector to target for IE6. As mentioned in the previous article, this particularly useful bug has been fixed so none of these rules will apply to IE7. This is actually good though, because some of the rules used to workaround IE6 bugs and deficiencies are no longer needed.

The good news — transparent PNG support

Most of the IE6 specific rules we used for Ingenious Ireland were to overcome the browsers terrible support for transparent PNG images. For example, the page header is a transparent PNG so its rounded corners would allow the various colours of background to show through:

* html #header{ background-image:none; filter:progid:DXImageTransform.Microsoft. »
AlphaImageLoader(enabled=true, »
sizingMethod=crop, src='furniture/banner.png'); position: static; }

This rule defines a proprietary filter allowing partial support for PNG transparency.

Luckily, IE7 will support PNG transparency, and because IE7 will not recognise the invalid * html, it will not see the IE6 specific rule, so we can just forget about all this filtering nonsense.

The bad news — the language pseudo selector

As Ingenious Ireland is a bilingual site, certain text-carrying background images, defined in the CSS, are selected based on the value of the language attribute in the html tag. This attribute can be targeted in the CSS using the :lang() pseudo selector, e.g. an Irish banner image:

html:lang(ga-IE) #header { background-image: url(banner_irish.png) }

(More details about this technique have been described in a previous article.)

The problem is, no version of Internet Explorer on the PC supports the :lang() pseudo selector, including IE7. (IE 5.x on the Mac does support it, but it always was the Best Browser In The World.)

We used an additional value for the class attribute in the body tag to specify the base language of a page for browsers that don’t support the CSS language pseudo selector, targeting it thus:

* html body.gaIE #header{ background-image: url(../furniture/banner_ga.png); }

Now the Internet Explorer team have fixed all those useful bugs we used to filter for IE6, like * html how can we target rules for IE7?

Conditional Comments and The Volatile Header

If you want to target CSS rules specifically for Internet Explorer, the official recommendation from Microsoft is to use conditional comments. This is a proprietary method for specifying html for various combinations of Internet Explorer 5 and above.

So, to link an IE7 only stylesheet, we add the following into the head of every document:

<!--[if IE 7]> <link rel="stylesheet" ref="/stylesheets/ie7win.css"/> <![endif]-->

All rules we want to target for just IE7 go in this stylesheet.

Why, after our best efforts creating stable mark-up, do we have to make additions to the header to make up for a browsers CSS deficiencies? I’d much prefer to link one stylesheet per alternative or device. The IE7 only stylesheet is really just an supplement for the main, screen stylesheet, not a new alternative.

It’s a shame there isn’t an officially sanctioned way to target for specific browsers within the CSS specification. The reality is we use hacks to achieve this anyway with the potential risk that the hack will be fixed, or new browser implementations will interpret the rules in an unexpected manner. Much better would be to provide a safe, stable way to achieve this by using some sort of conditional in the CSS.