CSS hacks Vs Conditional stylesheets

CSS hacks or Conditional stylesheets?

Ugly and Uglier

bad Internet explorer

There is no perfect way to handle IE. Each method has its own advantages and disadvantages. But what is the best way? In my opinion, it varies from project to project but one thing is guaranteed, you WILL have to deal with IE. The purpose of this post is to pass on what I have learned about CSS hacks.

Evil CSS HACK

Example:
.somestyle{
color: #FF0000;
margin-left: 400px;
*margin-left: 410px;
_margin-left: 408px;
margin-left: 415/
margin-top: -5px;
width: 272px;
}

Ugly? Oh! it gets uglier

Example:
margin-top: -8px; /* for all the real browsers */
margin-top/*\**/: 8px\9; /* hack for IE8 */
*margin-top: 8px; /* hack for IE7 */

OK, how about conditional stylesheets?

Looks better than hacks but additional HTTP requests to download. Imagine supporting ie6, ie7, ie8, ie9 and so on. Every time there is a new version, we would have to create another conditional style sheet to support it. In the case above, there will be 4 additional HTTP request.

Example:

conditional stylesheets

Better Solution?

Paul Irish suggested a solution and the answer is not to use any one of the methods above. I personally like this method but there is no right or wrong way.

style

In conclusion, you are still going to have multiple CSS rules, even if they are on the same stylesheet.

Thanks for sharing Paul Irish

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s