Many developers agree that CSS hacks are not the way to go. Personally, I am on that side of the fence and have been for a long time. I will spend time reworking the style of a document so that it will be cross-browser compatible with no CSS hacks in place. I do this because using CSS hacks is taking a step back.
Whats Wrong with CSS Hacks?
CSS is supposed to enhance the organization of your document and help as much as possible with maintenence. With the release of a new browser (read IE7) you should not have to worry about site compatibility. I think for those who supported CSS hacks in the past, the release of IE7 will help enforce the fact that they are not such a great idea.
CSS hacks make your style unstable, unclean, and difficult to manage. When a stylesheet is bombarded with CSS hacks it no longer looks like an effective document, but more like a jumbled foreign language. I feel that it would be better to have two separate CSS documents written as intended — hack free.
What is an alternative?
In my personal opinion, I think the way to go would be following Microsoft’s advice and giving Internet Explorer the crutch it needs using conditional comments. I think it is the cleanest way to handle IE’s shortcomings while keeping your primary style clean and organized.
Using conditional comments allows you to write your primary stylesheet for an upper level browser, and then write a separate stylesheet that will only apply to IE via conditional comments. For example:
<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<!--[if IE]><link href="ie_style.css" type="text/css" rel="stylesheet" media="screen,projection" /><![endif]-->As you can see, using this method would allow you to first develop in a higher level browser, and then compensate for Internet Explorer using a separate stylesheet which would be applied after the original, and compensate.
Microsoft has also provided a way for version control, which can come in very handy when making adjustments for a new version.
But There Are Already IE7 Hacks
I am dissapointed that people actually put time into researching IE7 hacks. That article was released with the understanding that hacks were not the way to go, but the information is included anyway.
Perhaps it is a good way to look into the pitfalls still present in the latest version of our favorite browser, but that is the furthest the information should go. Unfortunately I see it being used time and time again until the next release of Internet Explorer.
Comments
i wholey agree with you on “CSS hacks make your style unstable, unclean, and difficult to manage”.
when i visit a site that i admire and i want to see the underlying code, many times im turned OFF by their sloppy code.
they are usually well commented, but with TOO many hacks 🙁
and i dont understand ALL the hack methods to get IE to do what i want, so i dont get … WHY use hacks in the first place?!
there will always be a better, faster, more efficient style to come along.
If you just use a hack do import a special css-style for one specific browser (like dave shea usually do) then I actually think that it can IMPROVE document structure.
Boy, what a pain IE has caused us. Seriously, it’s a lose-lose situation as we either need to write entirely separate CSS files for the browser or use crappy hacks that may not work in the near future.
IE has caused so much trouble for us. If only the public knew…
Of this form it is better why you can work the styles each to browser better. My congratulations!
i like my markup to be clean. i can’t be bothered to taint it with browser-specific functionality (masquerading as a harmless comment to other browsers). “hey, we still haven’t got our CSS completely right, but we fixed the things you used to exploit for hacks. but don’t worry, just use our proprietary markup to work around that”. pah!
and the whole point with hacks being fixed in later versions: if the browser also fixes the reasons for which you used the hacks in the first place, there is absolutely no issue here whatsoever.
@jammodotnet: Absolutely — a stylesheet cluttered with hacks is difficult to understand at first without taking each hack and determining what it is doing.
@Fredrik: That is a good point, but when solving for IE, how would you import different stylesheets for IE6/Win and IE7?
@P.J.: It’s funny, most of the general public still see render issues as a “Firefox Problem”
@Patrick: I completely understand where you’re coming from and it would be great if all of the needs for IE6/Win hacks were replaced with a proper CSS rendering layer in IE7, but the trouble is that not everything has been fixed, and IE6/Win hacks can overlap into IE7 where you don’t want them to.
From my personal use, my IE6/Win stylesheets have usually been only a few lines tall, because like you, I have a bit of OCD when it comes to my markup. I don’t like using proprietary markup such as conditional comments, but seeing something like the Box Model Hack in a stylesheet bothers me more than seeing an IE-specific conditional comment. I’m in no way saying that conditional comments were a great solution from the start, I simply feel that they are a better alternative to spending time working out CSS hacks and destroying the presentation of your stylesheet. As I had said, I think conditional comments should be used as a crutch for Internet Explorer because they can be tailored to specific browser versions much more effectively than CSS hacks.
Hi, I’m the author of that blog post with the new IE7 CSS hacks. I was not specifically trying to find new hacks. I develop a set of web browser standards support tables and found various new bugs when testing Internet Explorer 7 support for CSS. The hacks were natural products of that research, and I figured I might as well publish my findings along with a disclaimer rather than wait for someone else to publish them without.
@David: I hope you didn’t take offense to what I wrote because I wasn’t trying to knock your findings. They are definitely useful and I’m glad they’ve found their way to the Web. I merely used your article as reference because it was one of the first I came across that had some legit research behind it. Again, I hope no offense was taken, and thanks for taking the time to post.
[…] it’s otherwise impossible to get Internet Explorer to behave desirably. To me, they’re much more acceptable than unstable CSS hacks or extensive !important declarations. They’re much easier to maintain, and it’s the […]
[…] this is (usually) a very easy fix. To force that parent element to clear itself in IE6, simply open your IE6-specific stylesheet and add […]
[…] IETester, I will first test in Internet Explorer 7, and correct inconsistencies using conditional comments. Once things are stable in IE7, I’ll move to IE6, which is the longest stage of The Browser […]
[…] other main factor to which I can attribute the success of Aggressive Graceful Degradation is that I employ conditional comments to target each version of Internet Explorer in such a way that my fixes are implemented quickly and […]
[…] a controversial issue since becoming widely adopted as a method of avoiding CSS hacks. I, for one, have stood behind Conditional Comments fot some time and use them in sites to this day. As with all things though, Conditional Comments have been abused […]