CSS Hacks

We all know that you should not use css hacks. And now that we don't have to support ancient versions of Internet Explorer, we really should never need too. But for the sake of compiling them many years ago, I've decided to post them here.

Browser Hacks

IE6 and below

	* html .class {attribute: value}

IE7

	*:first-child+html .class {attribute: value}

IE7, Firefox, Safari, Opera

	html>body .class {attribute: value}

IE8, Firefox, Safari, Opera (Everything but IE 6,7)

	html>/**/body .class {attribute: value}

Opera 9.27 and below, Safari 2

	html:first-child .class {attribute: value}

Safari 2-3

	html[xmlns*=""] body:last-child .class {attribute: value}

Safari 3+, chrome 1+, Opera9+, Firefox 3.5+

	body:first-of-type .class {attribute: value}

	body:nth-of-type(1) .class {attribute: value}

Safari 3+, Chrome1+

	@media screen and (-webkit-min-device-pixel-ratio:0) {.class {attribute: value}}

Safari 2 - 3.1

	html[xmlns*=""]:root .class {attribute: value}

Safari 2 - 3.1, Opera 9.25

	*|html[xmlns*=""] .class {attribute: value}

Everything but IE6-8

	:root *> .class {attribute: value}

Firefox only. 1+

	.class,  x:-moz-any-link  {attribute: value}

Firefox 3.0+

	.class,  x:-moz-any-link, x:default  {attribute: value}

Safari 3

	body:not(:root:root) .class {attribute: value;}

Safari 4

	@media screen and (-webkit-min-device-pixel-ratio:0) {.class {attirbute: value;}}

Attribute Hacks

IE6

	.class { _attribute: value}

IE6, IE7

	.class { *attibute: value}

Everything but IE6

	.class { attribute/**/: value}

IE6, IE7, IE8

	.class { attribute: value\9; }

IE7, IE8

	.class { attribute/*\**/: value\9; }