The easiest and best way to target CSS rules to Internet Explorer only is to use conditional comments to load an extra IE-specific stylesheet. That way all your IE-specific rules are in one file and separate from your standards-compliant CSS rules.
To target IE using conditional comments, just add this line to the head< tags of your HTML file:
These conditional comments will be ignored by every other browser so only IE 6 and IE 7 respectively will load these stylesheets. Now all you need to do is create the files on your server and override whatever CSS rules are messing with IE’s headers.
In fact this method works so well we aren’t even going to mention the * html hack or other older methods because there’s just no reason to use them any more.
Firefox
Firefox does a pretty good job of rendering web pages the way they are supposed to look, but every once in a while you’ll find some of the older versions doing something a bit wonky.
To target a rule at Firefox 1.5 and 2, use this hack:
The trick to this hack is the proposed CSS 3 :empty pseudo-class. The purpose of the :empty pseudo class is to allow you to target any element that has no child elements. However, Firefox 1.5 and 2.0 (and others based on those versions of Gecko) select the body even when the body has content. In other words this hack exploits a bug that was fixed in Firefox 3.
The big downside to using this hack is that it’s invalid CSS 2 and may not even make it into the CSS 3 specification, so your stylesheets won’t validate. However, Firefox is pretty good at backwards compatibility, so this may not be an issue for a while. Your mileage may vary.
What if you need to target all versions of Firefox? To do that you can use a trick borrowed from Firefox extensions:
The -moz prefix (which is also used for some of the cutting-edge CSS support in Firefox 3) is combined with the -document url-prefix() selector, which is how Firefox add-ons define their styles.
Since other browsers don’t use this add-on contention, the result is a rule only Firefox will apply.
If you’re looking to target only Firefox 3, you’re out of luck. At the time of this writing, Firefox 3 seems immune to any browser-specific hack.
We may have missed something, though. If you know of a way to target Firefox 3, be sure to add it.
/* Firefox3-specific CSS property for header_right.gif */
02
03
@-moz-document url-prefix() {
04
05
#header_right_gif, x:-moz-any-link, x:default {
06
07
position: relative;
08
09
top: -1px;
10
11
}
12
13
}
FIREFOX 3 SPECIFIC CSS with ASP.Net (from Focus 44)
I ran into a need to target Firefox 3 specifically. My developer at Focus44.com wrote me the following code to be placed in the
. You can see I have added a Firefox 3 specific Style Sheet and individual styles in the example. It will only work for ASP.Net pages but I have seen similar tricks for php:
As with Firefox 3, there’s no clear way to target specific versions of Safari, but there is a very ugly trick you can use to apply rules to only Safari 1 and 2:
The first rule will set the font to red in all browsers. The second rule will set the font to black in every browser except Safari 1 & 2. This hack works because the first two releases of Safari had a bug where a hash mark after the semicolon caused Safari to choke.
This is probably the ugliest hack in this tutorial, so use it sparingly if at all. Also note that Safari 1 and 2 will choke on every rule after the “#” so put these at the bottom of your stylesheet.
If you need to target Safari in general (regardless of which version) use the same prefix trick we used with Firefox.
In Safari’s case (or any other webkit browser), the rule looks like this:
@media screen and (-webkit-min-device-pixel-ratio:0) {
2
3
#my-id { height: 100%; }
4
5
}
The downside to this hack is that it also applies to Opera 9+. However you can retain the Safari-only aspect by combining it with the Opera-only rule below.
Opera
Generally speaking Opera doesn’t require many CSS hack since it’s perhaps the most standards compliant of all the browsers. In fact, if you find something is rendering poorly in Opera, there’s a good chance the error is on your end, not the browser’s.
But, should you ever need to target Opera, we have a way. This one comes courtesy of Neal Grosskopf. Grasskopf also has a comprehensive list of other browser hacks, including some conditional comment hacks we try to avoid.
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
2
3
#my-id { clear:right; }
4
5
}
As Gosskopf notes in his write up, this is one of the weakest hacks since it isn’t really targeting Opera, it’s targeting all browsers that support -min-device-pixel-ratio that aren’t using the webkit rendering engine. At the moment that means Opera, but eventually Firefox will add support for -min-device-pixel-ratio which means, eventually, it too will be affected by this hack.
