CSS and Internet Explorer: To Hack or Not To Hack?
We see discussions every once in a while about table-based layouts versus CSS and DIVs, but I haven't seen a thread about the benefits and disadvantages of using CSS hacks, or filters. Let that be this thread
First and foremost, I want this to be educational and a discussion utilizing facts. Link to articles, studies, etc. If you post something that's not backed up with facts, point out that it's your opinion. And opinions are welcome, but I don't want this to degrade to a fist fight. That said...
What is a CSS hack?
Simply put, a CSS hack, sometimes called a CSS filter, is writing CSS styles that take advantage of browser support for style sheets and bugs in how browsers read style sheets. You give one browser a certain property and value, then use some sort of hack to give another browser a different value. A small example is in order.
color: red; /* Hide from IE5-Mac: \*/
color: green; /* End IE5-Mac hiding */
This particular hack takes advantage of an Internet Explorer 5/Mac bug where the backslash character escapes the following character. To IE5-Mac, the asterisk after the backslash simply doesn't exist. The CSS comment remains unclosed in IE5-Mac until the next occurrence of "*/" -- effectively hiding the color: green; property and value. IE5-Mac shows red text. All other browsers show green text.
Why are CSS hacks used?
Certain browsers *cough* Internet Explorer *cough* have bugs in how they support cascading style sheets. Sometimes the browser was simply programmed wrong. In either case, a CSS hack is used to correct differences in how certain browsers render the same CSS.
What are the advantages of using CSS hacks?
* Allows you to write one CSS file that works in all browsers
* Fewer CSS files to download means fewer trips to a busy server, which means the page will load faster (and it's less stress on a busy server).
* Sometimes the hacks use proprietary CSS properties.
* A hack for one browser may be recognized by a future version of a different browser, effectively breaking the style sheet.
* Hacks can add unneeded bulk to a style sheet.
* Multiple hacks can be a nightmare to interpret in the future.
What are the alternatives to using CSS hacks?
Since hacks are almost always written to get Internet Explorer to behave properly, a good alternative is using conditional comments that are only recognized by Internet Explorer, and allow you to import IE-only style sheets that contain the styles needed to get Internet Explorer working.
Then you've got your main style sheets that all browsers import. CSS is written to specification. The style sheets imported using conditional comments contain all the incorrect values that IE needs in order to function. But then you've got two style sheets where there only used to be one.
My thoughts on CSS hacks
Hooray for hacks. I don't like going hack crazy, mind you. But I won't shy away from a hack if it gets the job done. My prefered method is to use as few hacks as possible. Since most IE-Win bugs can be cured by invoking the hasLayout property, I tend to give things set widths and not just relying on a block element taking up the correct width. If a width doesn't work, I use the proprietary Internet Explorer property and value zoom: 1;