CSS Hacks: Are They Cool or Not?

Posted by Ron Scott on May 28th, 2007.

Ron is a 15 year-old web designer from Nova Scotia, Canada. When he's not coding CSS and XHTML or designing layouts in Photoshop, he can be found working on his photography skills or writing for his website, BetaTalk.

http://www.betatalk.info

Ron Scott has posted 2 articles.

RSS Feed for fadtastic.net RSS Feed for Ron Scott

Full Profile →

Most of us have been around CSS for long enough to know the good and the not-so-good of the business. Many of us have been frustrated at times at the behavior of seemingly straightforward in unruly browsers, namely Internet Explorer. As a result, the web development community has found numerous solutions around these problems. CSS hacks have received a lot of attention in the last two years as a relatively safe way to tame the problems these browsers present to us - but is it really a good idea?

A Brief Introduction to CSS Hacks

For those who don’t know a lot about CSS hacks, here’s a simple explanation: they take advantage of browser bugs (or browser “weaknesses”) to hide certain styling rules from specific browsers, using special characters/words that are interpreted differently. The use of these hacks is a subject of much debate in the blogosphere these days.

Various standardistas and web designers such as Roger Johansson and Peter-Paul Koch have spoken out against the use of CSS hacks, saying conditional comments are the way to go. In my opinion this the best option for every designer who needs to assign different CSS property values for different browsers. It rids our stylesheets of the messy hacks and workarounds used to tame the pages, and it helps to organize and streamline our CSS.

Code for the Future

Abstaining from using CSS hacks is the way to prepare for the bright future of CSS. This was mentioned by Roger Johansson a while ago in an interview that was posted on Fadtastic, and I want to reinforce that point again. In this uncertain world we code in, there’s really no telling what bugs will be fixed and what bugs won’t be. There must not be any place in the semantic web for a mess of “!important” hacks and weird selectors.

I think it’s pretty obvious that the clean, straightforward stylesheet (with no hacks) is the ideal setup, and the closest we can get to this for the time being is conditional comments. This is for the time being, leaving room for browser improvements and less hassle when cleaning up our code to comply with the new breed of browsers.

Do conditional comments fall into the “hacks” category? If you consider a CSS “hack” to be anything that gives special instructions to certain browsers, the answer is yes. But since conditional comments don’t utilize one browser bug to fix another one (as all real CSS hacks do), they can be put into a category of their own.

Conclusion

Finally, I’ll say that every web designer should use CSS hacks as a last resort only, and not as common practice. If your pages have a rendering problem in Internet Explorer, spend as much time as you can searching for a semantic solution that doesn’t use a CSS hack to solve the problem. If this fails, use conditional comments to correctly apply the proper rules to the misbehaving browser. Keep hacks out of your code, and you’ll set an example for the design world to follow (and save yourself some grief down the road).

Share This

( 14 so far )

Comments RSS Feed

I find using hacks (or CCs) is sometimes inevitable, but i would really like to see CCs in CSS aswell as HTML.

When working on very large websites i often have one base CSS and one for each unique page that contains styling only needed on that page (to limit filesize). It would be neat if i could put all the hacks for a page in the same file, instead of one massive IE-CSS-file with every hack for every page.

But i do agree with most people that hacks should be avoided as much as posibble.

Andreas
May 28th, 2007
#

It is my personal opinion that hacks are the wrong way to go. What everyone is trying to work toward is solid design with sound code supporting it. CSS hacks are not sound. I’m sure many designers/developers spent lots of time ‘fixing’ client websites in preparation for the release of IE7, and I’m nearly as sure they won’t want to go through that again. Unfortunately, with hacks, you’re faced with that situation with every browser release. To me it seems like a step backward. We all know hacks are mostly used to help out with rendering in Internet Explorer, but Microsoft gave us a perfectly good crutch in conditional comments. Other browsers neglect them as commented data and are none the wiser. The only browser to do anything with a conditional comment is the browser we’re trying to target. Add on control right down to browser version and we as designers/developers are good to go. Yes there are a couple extra lines in our source, and there are also extra style sheets, but in my opinion the end result is far more stable than hacks and well worth it.

Jon Christopher
May 28th, 2007
#

When I’m working on a website I try to use absolutely no CSS hacks, conditional comments for IE are the way to go.

Though, there is one hack I occasionaly resort to and that’s the clearing float hack (http://www.positioniseverything.net/easyclearing.html). I could just use clearing divs but that would mean adding an extra element to the markup.

Rommert
May 28th, 2007
#

I guess I take a different stance. I would rather place the hacks in a separate stylesheet than use the Conditional Comments. Conditional Comments live in the markup. For those who don’t deal with templates/included files this can take quite a while to remove them from the head. I don’t even care so much that they are invalid (since they aren’t seen), but it IS just another hack (only IE renders it).

So, I would rather extract the hack to a separate css (@import, whatever you choose), than to add something extra to markup (which is still a hack).

Your best bet, as stated above, is to find out what works and use that - seek out solutions that won’t require hacks in the first place. Then, when you have no where else to turn - you may have to resort to hacks.

Nate Klaiber
May 28th, 2007
#

You make a good point, Nate. Conditional comments can be a bit of a hassle sometimes when you aren’t using templates/includes, but hacks can (and will) cause grief in the future when there’s even more browsers on the market, and you need to go through your CSS to fix various errors.

Ron Scott
May 28th, 2007
#

To not use hacks is to deny yourself the present for the hope of the future. I am not going to allow myself to suffer simply because Microsoft was nasty 2-10 years ago.

Hacks might not be ‘cool’, but me having a useful, functional, profitable site is ‘cool’. So I shall remain with hacks.

Brandon
May 28th, 2007
#

I agree with those who suggest using conditional comments to insert various CSS fixes for IE. But what about others instances? Though not as common, there are hacks for Safari and Opera. What about inline css hacks for IE (common in pages created from a CMS, where you don’t have access to the entire resulting HTML doc.)?

While we may not be proud of using hacks, sometimes a few here or there can get projects across the finish line.

Ted Goas
May 29th, 2007
#

It isn’t always easy to be ‘hack-free’. I’m sure we all try to avoid them but sometimes the time to correct a css problem would be far to great in the later stages of development.

I am a firm believer in condition comments. I am using asmall one on my own website currently. I still await the days when I can create a stylesheet without the hassel of different appearances, but, untill then I will resort to conditional comments and if all else fails hacks.

Darren
May 29th, 2007
#

I agree that it isn’t always easy to be hack free.

One thing that annoys me though is when designers expect the design to look exactly the same in different browsers and use hacks to achieve this. Why bother? One should be trying to get it to look great in all browsers, not identical.

Andrew Faulkner
May 29th, 2007
#

Andrew, I recently worked for a shop that asked for this ‘pixel-perfect’ detail across every browser. We lived and died by hacks a lot of the time.

As you point out, we spent more time perfecting the details of a site rather than working on new clients and bringing in more $$$.

Ted Goas
May 29th, 2007
#

I hate hacks, but sometimes there’s no alternative. I like the idea of putting hacks in a separate file so it’s easy to locate them and correct them as they become obsolete…and so someone working after you can easily find them. As much as I try to make my CSS hack free, it’s a hard position to take against a boss/client who is wondering why a layout looks a little “off”. If a workaround exists, I’m going to have to use it.

I see conditional comments as a less-evil version of a hack. To me, it’s no worse than having separate style sheets for separate browsers, and less redundant. A conditional comment is at least formally supported somehow, and less likely to break in the future; whereas a true hack is really just exploiting a bug and can cause problems down the road.

Rachel
May 29th, 2007
#

I find the more and more you practice CSS the less need there is for hacks.

I recently did a project where everything worked fine in the major non IE browsers and all i had to do was a seperate css for ie6.

It only had 6 lines in it.

I compared this to when I first started CSS, where there were hacks everywhere.

I think with experience you can learn how to deal with problems without using hacks. But also more importantly you code defensively, so you dont have to resort to them at all.

Chris James
June 1st, 2007
#

Aslong as IE exists as worlds worst CSS programm, hacks are very usefull and cool =P

YPM
June 5th, 2007
#

I would love to not have to use hacks, but it’s apparent that it’s just a way of life right now. Until browsers start rendering CSS/XHTML in a consistent manner there will always be "hacks". Personally, hacks feel like bandaiding the real problem of inconsistent browser standards and I loathe what I call "patchwork coding".

DeeDee
October 25th, 2007
#

↑ Jump up to the comment form

The above post has obviously kept you amused. Why not discover similar material:

The posts Hacked off with CSS?, One Year Ago | CSS Hacks, Awesome HOT TIPS for YOUR WEBSITE in 2008, Big Players (not) Using Trends, The Life and Times of Cool, are related to this post.

Or why not take time out to find out about the author of the post.