CSS Hacks

We all know that you should not use css hacks. We also all know that sometimes you must, whether it be for lack of development time or simply because you have to support every browser ever created... ever. Here is a list of css hacks that I have compiled over the years. Let me first reiterate that these should only be used as a last resort.

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; }