by Kyle Weems 21.November 2007 08:56
Any web developer who hasn't been living in a cave for the past two decades knows that there's a problem with Internet Explorer when it comes to adhering to CSS standards. Any web developer who has been living in a cave for all that time must have gone through waaay too much effort to get Internet access installed out in the woods.
Because even IE7 likes to take tupping liberties with styles, every web developer who wants to sleep at night secure in the belief that his projects look the same on every browser must eventually face the brutal gauntlet of css hacking for Internet Explorer. Hours are spent combing through the web-o-tron's arcane library of eldritch css lore. The witching hour is filled with frantic typing as one tries alternate solutions to even the most basic of design issues. And finally, when all hope is lost, the harried developer desperately takes the only solution available to him, and sign's the devil's bargin: the dreaded star hack.
For those of you who aren't in the know, the star hack is a technique used to make a CSS style visible to Internet Explorer, but not other browsers. For example, if you put the following style in your css file:
div#content
{
color : #FF0000;
}
Then in any broswer the div "content" will have red text. However, if you do the following:
*div#content
{
color: #FF0000;
}
Then most of your browsers will continue to use your default text color, but Internet Explorer will have red text. The reason for this is that for whatever obscure reason, IE ignores the star in the selector, reading it as "div#content", whereas other browsers do not. So it will apply the style, while Mozilla and other well-behaved browsers ignore the aberrant style and happily continue on their way.
This has been, historically, a good thing. Developers could now apply one set of styles to all browsers, and Internet Explorer can have its styles tweaked with selectors preceded by the asterisk, allowing corrections to be made and providing a relatively stress-free way to solve one of the greater dillemas faced in the web design industry on a daily basis.
However (and there's always a however), not all is well in the happy, star-lit realm this hack provides. There are three major problems that occur. First, the hack is a hack, which means that although it works now, it may not work on all forthcoming versions of IE. As such, any styles made with it today may break tomorrow. This hurts one of the major ideas of standards, which is providing a consistant appearance for a site on all browsers now and going forward (and furthermore means you'll be spending more time and money fixing today's solutions tomorrow).
Secondly, the hack causes CSS validation to fail. Sure, the W3C's validation tools are cranky at times, and outright ignored by some. But validation is, ultimately, a good thing, helping ensure a standards-compliant Internet.
Lastly, no longer is Internet Explorer the only browser reading those star hack styles. Although I've yet to test it on a Mac, Safari for Windows will happily read and apply styles using this hack. Since Safari is generally more compliant than IE, that means that it's actually breaking it's styles by also reading the star-hacked styles in addition to the standard ones. Yes, Safari for Windows is like IE for Mac... an abberration that just shouldn't exist. But it does, and it presents the problem that we've all been worried about: the star hack is beginning to cause problems with other browsers.
So what do we do? Run for the hills? Poke Microsoft's IE development team with sharp sticks? No. There's a better solution:
Conditional comments.
We all know what comments are. Well, I hope we do. For those not in the know, a comment is a statement in the code that is supposed to be ignored by the program. Usually, it provides developers with information about what a given piece of code is supposed to do when they come back to a project a year later. Sometimes, however, it's a reminder to cut your hair and buy a turkey on the way home.
Internet Explorer has a special way that it uses comments, though. In addition to the uses above, IE also can use comments to selectively run a bit of HTML that meets certain conditions.
For example, the following is your basic comment in HTML:
<!-- the following section is the copyright info -->
It's a plain text statement for developers to read, not the browser. It doesn't do anything, it doesn't show up on your window, it just sits there. The following, however, is a conditional comment:
<!--[if IE]><
Every browser in the world except for IE will assume it's just a normal comment, and ignore the code. However, Internet Explorer will see the condition inside it, and then run the HTML inside it!
This is great for a number of reasons. First, you can take all your IE specific styles and put them in their own stylesheet which will never be viewed by other browsers. This'll help clean up your styles and prevent issues like Safari trying to read styles you meant for IE. Secondly, you can take those styles, which are now safely isolated in their own sheet, and get rid of the star hacks! Less hacks now equals less problems later. All your styles will be capable of validating, your site will look correct on all browsers, and world peace will finally come true.
Ok, maybe not the last part.
Ultimately, this is a much better solution for IE style-fixes than the star hack, and yet I see it championed much less on CSS developer forums. So spread the word: conditional comments good, star hacks bad. If you like conditional comments, go investigate them in more detail, as there's some extra functionality there that can come in handy (for example, the ability to filter based on the version of IE you're using, which is a godsend when it comes to fixing styles for old, non-compliant browsers like IE6).
Now get out there and fix your stylesheets.