I don’t know how many of these I run across and not all of them are either accurate (up to date) or complete (some are, but the majority aren’t). That’s what persuaded me to write this quick and dirty cheatsheet for those of you who want that little piece of css to get that one browser working.

We’ll start with a simple truth – I code for FireFox (and Chrome) and it seems to have no problems with most code. That being said, there are times where it goes haywire. FF2 and floated elements sometimes have issues.

Anything which says ‘CODE’ means your particular css that you want to be cross-browser.

FireFox | IE6 | IE7 | Opera | Safari

FireFox

This particular hack targets FireFox 1 and FireFox 2.

body:empty CODE { }

This hacks targets FireFox 2 and below, particularly nice and foolproof.

CODE, x:-moz-any-link {
  property: value;
}

This works well.

html>body CODE { }

This one is a newer hack.

html:not([lang*=""]) CODE { }

This one is to be used with the previous hack that used x:-moz-any-link.

/* This is for the FireFox 2 and 1 */
CODE, x:-moz-any-link {
  property: value;
}
/* Then overwrite for Firefox 3 specifically */
CODE, x:-moz-any-link, x:default {
  property: value;
}

This is the surefire method of targetting FireFox though, by using proprietary extensions. Not neat. But, works 100%.

@-moz-document url-prefix() {
  CODE { }
}

IE6

This particular cross-browser cheat is an old one, but still works. Also targets IE5 though.

* html CODE { }

This one (I feel) isn’t as good as the previous one.

body CODE {
  _property: value;
}

IE7

This is another old favourite for IE7.

*+html CODE { }

And here is one that took over from the previous one. This is valid CSS too.

*:first-child+html CODE { }

Since IE6 doesn’t understand the > selector, this one works well. Note the * directly in front of the property. I don’t use this one though since the first one works fine.

html > body CODE {
  *property: value;
}

Opera

This one is a bit more in-depth.

@media all and (min-width:0px) {
  head~body CODE { }
}

And this one targets Opera 9 and below.

html:first-child CODE { }

This one is one of the latest Opera 9 css hacks out:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  head~body CODE { }
}

Safari

Like the proprietary FireFox hacks (above), Safari has one that works 100% with it.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  CODE { }
}

This one is for Safari 3.0+ and is valid css3 so it will eventually be supported by other browsers.

body:first-of-type CODE {
  property:value;
}

For Safari 3.1 this works. This also targets Google Chrome.

body:nth-of-type(1) CODE {
  property: value;
}