CSS hacks

CSS hacks are lines of code inside a CSS file which replace certain code with another in order to achieve the best possible design for all browsers.

Actually most of the hacks have to do with Internet Explorer 6 and below. Everybody knows that IE has caused the most troubles in Web design and it still does.

The following hacks are simple solutions which can be easily applied, not a complete guide to CSS hacks.

The !important hacks

#nav {
border: 1px solid #ccc; !important;
border: 1px solid #ccc;
}

This hack is based on the fact that IE6 (and below) cannot treat many properties in a rule. Thus, IE will read the second property and it will ignore the first, while in the modern browsers the !important will prevail.

Since old IE cannot treats dotted lines as dashed, dotted borders look ugly. Thanks to this hack we have an at least solid line as a border for IE.

IE7 knows how to treat dotted lines at last.

The star hack

a:hover {
border: 1px dotted #ccc;
}

* html a:hover {
border: 1px solid #ccc;
}

The first part of the code applies a rule and the second overrides it. This is something that old versions of IE understand.

So, as it happened before, the dotted border is bypassed by IE.

The ch­ild selector hack

html>body{
background: url(back.png);
}

This hack hides from old versions of IE the image back.png.

This happens thanks to the child selector “>” which cannot be recognized by IE. The modern browsers, including IE7, read it and apply the background image.

If this back.png image was a transparent one, this hack might have been a very convenient solution. As everybody knows transparent .png files are also not recognized by old IE.

The attribute selector hack

div[id="content"] {
background: url(back.png);
}

Like before, there is a selector, the attribute selector “[id=”...”]”, which means nothing to IE6 and below. The result is a background image which can be seen in modern browsers but not in old versions of IE.

Apart from these hacks there is another way to solve problems caused by Internet Explorer: the Conditional Comments. I wrote about them a short time ago. I can’t recommend the one solution or the other but little by little I find hacks more convenient for me.