Nifty one-line IE6 CSS hack

Sometimes if there is no other way to fix UI issue we are forced to use CSS hacks. Even though they are not valid from W3C point of view, they simple do the job and save plenty of time.

In this article I will present my favourite CSS hack where we can specifically target IE6 or IE7 or any other browser.

.mySquare { width:100px; height:100px; background:red;
*background:green; _background:yellow;}

<div class="mySquare"></div>

And we're done! Code above displays:

• Yellow square on IE6,
• Green square on IE7,
• Red square on all other popular browsers (Internet Explorer 8, Firefox, Chrome, Opera, Safari)

The beauty about this particular hack is that CSS is kept within one CSS property. You don’t need to look around or open separate CSS files to check if style was already applied for other browser somewhere else (like when you use <--[if IE 6]-->).

The down side - even though it fixes the problem this is not valid CSS so W3C validator will return error.