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.

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  or element. This approach allows you to write clean and hack-free CSS at the cost of adding hacks conditional comments to your HTML.

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:

You can then use 
.for-ie8
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 */
}