I think I’m somewhat of a rarity in the world of web developers – I actively use and certainly approve of CSS hacks to target and fix certain browsers. Of course, I don’t condone their use unless it is absolutely necessary, and in most cases good, standards compliant CSS should alleviate most issues before they occur, but when there is a need I think these hacks can be a great way to fix issues while still keeping your CSS logical and concise. The caveat to this is that all hacks need good comments to describe what is going on for future reference, whether that be your own or that of another developer. Also, always keep in mind that hacks can break when new browser versions are released, so always keep an eye out and use them sparingly.
I’ve always found it hard to find a good reference for these hacks. There are many sites that talk about an individual hack, but finding a single place that goes through targeting all the different browsers has been hard. This post hopes to solve that – more for my own use, but hopefully other developers can find it useful as well. What follows are the hacks that I use, which I believe to be the most logical and simple ones out there. In every case, #selector represents the element you want to apply a rule to (this can be either an ID or a class), and property and value represent any normal CSS property.
Internet Explorer 6
Let’s start with the one that developers will probably need to use most often. To target IE6:
-
#selector {
-
_property: value;
-
}
Internet Explorer 7
The following targets IE7 and below. You can use it in conjunction with the above rule to be able to target IE7 and IE6 individually – just make sure you declare the IE7 rule first, then the IE6 rule.
-
/* Target IE7 and below */
-
#selector {
-
*property: value;
-
}
-
/* Then overwrite for targeting IE6 specifically */
-
#selector {
-
_property: value;
-
}
Firefox 2
The easiest way to target versions of Firefox is with selectors that only work in Gecko-based browsers. The following will target Firefox version 2 and below:
-
#selector, x:-moz-any-link {
-
property: value;
-
}
Firefox 3
As with the Internet Explorer 7 hack, you can easily combine the Firefox 2 and Firefox 3 hacks to target those specific versions of Firefox.
-
/* Target Firefox 2 */
-
#selector, x:-moz-any-link {
-
property: value;
-
}
-
-
/* Then overwrite for Firefox 3 specifically */
-
#selector, x:-moz-any-link, x:default {
-
property: value;
-
}
Safari 3.0+
The following will target Safari version 3 and above. To target just Safari 3.1, see the next hack. Note that this is valid CSS3, and as such other browsers will eventually start supporting it, so be wary.
Update: Firefox 3.5 now supports this, and will read the style
-
body:first-of-type #selector {
-
property:value;
-
}
Safari 3.1 and Google Chrome
Google Chrome and Safari both use the Webkit rendering engine, and as such shouldn’t usually need to be targeted separately. So far, I have not found a way to target just Google Chrome, so attack that with JavaScript for the best results. Make sure you declare this after the Safari 3.0 hack above, as Chrome and Safari 3.1 will read that as well.
Update: Firefox 3.5 now supports this, and will read the style
-
body:nth-of-type(1) #selector {
-
property: value;
-
}
Opera 9
While Opera is pretty good at rendering standards compliant code, and won’t generally need hacks, there are times when it is necessary. Unfortunately, I haven’t found a good way to target just Opera – instead, the easiest way is to use a rule that targets Opera and Safari (and other Webkit browsers like Chrome), then reset for the Webkit browsers.
-
/* Declare for Opera and Webkit */
-
@media screen and (-webkit-min-device-pixel-ratio:0){
-
#selector {
-
property: value;
-
}
-
}
-
-
/* Revert for Safari (and other Webkit browsers) and Firefox 3.5 */
-
body:first-of-type #selector {
-
property:value;
-
}