Photo Credit: Chris Harrison

Photo Credit: Lush.i.ous

Photo Credit: h.wren

Photo Credit: emdot


Apr26

Should CSS Hacks Be Used?

Simple answer: No.

Point of CSS Hacks

CSS Hacks are quite useful.  IE interprets the box model differently than Firefox and sometimes requires different CSS styling to achieve comparative results to Firefox.  To pass CSS styles to IE only CSS bugs were discovered that allowed designers the ability to keep all their CSS code in one CSS file, but target a specific browser for bits of code.

This made it easy to pass IE styles to make it display properly.  The most famous and most widely used of the CSS Hacks is the * html hack.  By placing * html before the selector in your CSS you could target IE specifically with whatever styles it contained.  This was done because Firefox would skip right over the statement, but IE would read and apply it.  Although it was a pain to have to fix IE, CSS Hacks at least made our job as designers easier.

But then IE7 was released.

IE7 didn’t require the same styles that IE6 needed because Microsoft upgraded IE’s CSS standard compliance.  Thus all your * html styles that once fixed IE6 could be breaking IE7.  Combine this with the fact that IE7 seems to randomly choose when to follow * html styles, which in my experience has only been about 50% of the time, and you have a big problem.

Since then newer hacks have been found to target IE7, but they are flimsy at best.

So what’s the answer?  How can we insure that our styles for IE reach the proper browser and proper version?  Unfortunitly it now requires conditional logic to detect the browser used and feed it either a style tag or a CSS file.

CSS Conditional Logic

Using CSS Conditional Logic you can now target not only IE, but also specific versions of IE.  This is useful when IE 6 needs different code than IE 7.  You can read more about CSS Conditional Logic on Microsoft’s site.  Conditional Logic allows for greater control of your CSS styles.  It allows you to know 100% that your styles are reaching the exact browser you intended.

The downside of Conditional Logic is from a maintenance point of view.  In the span of fixing each browser you may find yourself now using three or more CSS files.  The usefulness of CSS Hacks was that it allowed you to keep all styles together.  Conditional Logic requires some styles to be on its own, either on the page or in a separate CSS file.

Which way is the best?

The fact that CSS Hacks can sometimes be skipped by the intended browser is a deal breaker in my eyes.  If I need a style to be applied to IE 7, I don’t want it to only work 75% of the time.  In my experience CSS Hacks simply can’t offer a 100% track record.  I’ve used them in the past and have had them fail far to many times.  CSS Conditional Logic offers a 100% guarantee that your browser specific styles will be picked up and used,  and when you’re working on big websites, a 100% guarantee is exactly what you want.

Comments

  1. Apr30

    Jeremy Heslop

    But why oh why must we use hacks, conditionals or other for the horrid browser called IE! Thanks for the good tip about conditionals. I’ve been pulling my hair out with crappy hacks found all over the net. You are right works 50% of the time. Another interesting article is here: http://www.tjkdesign.com/articles/conditional_comments.asp


Reply