Monday, June 13, 2011

4 Types of CSS Hacks for Web Designers and Developers

CSS hacks are always useful for Web Designer and Developers. It become very handy when you are fixing up browser compatibility issues. If you know different types of CSS hacks you can save your time and increase your productivity.

If you are a Web Designer or Developer and looking for a CSS hacks then this post going to help you. In this post I am going to share 4 different types of CSS hacks you can use.

Here's the following list:

Conditional stylesheets

Following are the good example of Conditional stylesheet for Internet Explorer. Conditional comments used easily to specify stylesheets that should only be loaded in IE, or even in specific versions of that browser. Don't worry about Non-IE browsers, it treats conditional comments as HTML comment.

<!--[if for IE 8]><link rel="stylesheet" href="for-ie-8.css"><![endif]-->
<!--[if for IE 7]><link rel="stylesheet" href="for-ie-7.css"><![endif]-->
<!--[if for IE 6]><link rel="stylesheet" href="for-ie-6.css"><![endif]-->

Above CSS hack used differently in specific versions of IE, it would look something like this:

/* Main stylesheet */
.test { color: black; }

/* for-ie-8.css, for IE8 and older */
.test { color: red; }

/* for-ie-7.css, for IE7 and older */
.test { color: white; }

/* for-ie-6.css, for IE6 and older */
.test { color: black; }

Conditional classnames

If you don't want to use CSS hacks, you can apply conditional classnames to the <html> or <body> element. This approach allows you to write clean and hack-free CSS at the cost of adding hacks conditional comments to your HTML.

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->

This allows you to keep your browser-specific CSS in the same file:

.test { color: black; }
.ie8 .test { color: red; } /* IE8 */
.ie7 .test { color: white; } /* IE7 */
.ie6 .test { color: black; } /*IE6 and IE5*/

CSS hacks

Here’s an overview of the four most popular CSS hacks and which browsers they’re supposed to target:

.test {
color: black;
color: green\9; /* IE8 and older, but there’s more… */
*color: blue; /* IE7 and older */
_color: red; /* IE6 and older */
color: expression('red'); /* IE6 and above */

Using conditional classnames with CSS hacks

In the HTML, you can use a minimal version of the conditional classnames technique, like this:

<!--[if lt IE 9]><html class="for-ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->

You can then use
as a styling hook in CSS selectors to target IE8 and older versions. Combined with CSS hacks, you can finally target IE8 and older versions without also affecting IE9:

.test {
color: black;

.for-ie8 .test {
color: red; /* IE8 and older */
*color: green; /* IE7 and older */
_color: blue; /* IE6 and older */

If you have any opinion, please leave a comment or share this post.

Related Posts :


joyoge designers bookmark said...

nice tips, thanks for the post

Ahmad Alfy said...

I do use conditional statements and conditional tags
But why do we need to use CSS hacks? just cause it's quick or what? I always read that "hacks" are not recommended.

Web Designer Developers said...

Good stuff defined

Create an Online Store said...

I have learnt of one among these and it was quite interesting.

php mysql web development said...

With codes, you have shared very helpful information.

PSD To Wordpress said...

The various tools described in the post are really useful for the web developers.Thanks for sharing this useful data here with us..Great work keep it up...

Sigourney Campbell said...

Thank you for suggesting different CSS hacks which can help to designers and developers and can save time and increases productivity.

Post a Comment


Copyright © 2009 -