ElanMan

What are CSS hacks?

A CSS hack is a way to use the browsers incorrect implementation of CSS to your benefit. Different browsers have different ways of interpreting combinations of css rules and selectors. Although it’s preferable to use conditional comments wherever possible, there are definitely times when a quick css hack is ideal. For example, if I have just one rule that needs overriding for IE, I will use a hack simply because its quicker and involves less messing about. Our time is valuable after all!

Another thing to consider is that not all css hacks are targetted at Internet Explorer. Other browsers have their own specific hacks too and because conditional comments only work with IE, these ‘other browser’ hacks are sometimes needed to correct a tricky/time consuming problem.

Now, before you  wave your finger at me and shout the immortal line ‘If you coded your pages correctly in the first place, you wouldn’t need hacks at all!’, let me just say that I agree with you (up to a point). Having clean, validated html is an essential step to getting your site looking good across most browsers but it doesn’t guarantee it. If you are on a tight deadline with a client breathing down your neck and you’re struggling with an element’s position/height/z-index in 1 browser, a css hack can save the day!

The Example

We have a div with an id of mydiv. Its related css is below.

1
2
3
4

#mydiv {
    width:780px;
    min-height:300px;
}

Very basic I know but this won’t work with IE6; it doesn’t understand the min-height rule. Depending on your layout, simply declaring a fixed height for IE6 can overcome this problem. So we need to say to IE6 and only IE6 ‘height:300px;’.
We do that like this:

1
2
3
4
5
6
7

#mydiv {
    width:780px;
    min-height:300px;
}
* html #mydiv {
    height:300px;
}

Notice the second css declaration. By inserting * html (notice the space in between the ‘*’ and ‘html’) in front of the standard selector (#mydiv), we achieve an IE6 specific rule. The rule targets ‘#mydiv’ which is inside ‘html’ which in turn is inside any other element ‘#’ (the universal selector). This is complete nonsense as ‘html’ can’t be inside another element; it is the document root. IE6 however, thinks differently. All other browsers ignore the rule for the gibberish that it is.

Every css hack relies on the strange behaviour of a particular browser. The previous one was for IE6. Let’s take a look at other browser hacks that would target #mydiv:

IE7 Only

1
2
3

*:first-child+html #mydiv {
    IE7 rule here...
}

Opera 9 and Safari 3

1
2
3
4
5
6

/*notice 2 pairs of curly brackets*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #mydiv {
        Opera 9 and Safari 3 rule here...
    }
}

Obviously, this is just scratching the surface when it comes to css hacks. There are lots of hacks out there! I have used the ones shown above though and find they do the job perfectly.
To find out more about browser bugs and css hacks, check out the following links:

webdevout, positioniseverything

Category: CSS // Make ElanMan happy and be the first to comment.Open my Lovebox