I don’t use CSS hacks anymore. Instead I use IE’s conditional comments to apply classes to the body tag.

Nonetheless, I wanted to document every browser-specific css selector and style attribute hack I’ve seen. Plus there’s no way to provide stylesheets to only Safari, I believe.

With these you’ll be able to better target IE, Firefox, Chrome, Safari and Opera from within the css.

So here are go:

2013.03.04: It looks like browserhacks.com has taken the place of this post. More at Introducing Browserhacks . Yay!

Comprehensive List of Browser-Specific CSS Hacks

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 /***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color : red } /* IE7 */ * :first-child + html #dos { color : red } /* IE7, FF, Saf, Opera */ html > body #tres { color : red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html > /**/ body #cuatro { color : red } /* Opera 9.27 and below, safari 2 */ html :first-child #cinco { color : red } /* Safari 2-3 */ html [ xmlns *= "" ] body :last-child #seis { color : red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body :nth-of-type ( 1 ) #siete { color : red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body :first-of-type #ocho { color : red } /* saf3+, chrome1+ */ @media screen and ( -webkit-min-device-pixel-ratio :0 ) { #diez { color : red } } /* iPhone / mobile webkit */ @media screen and ( max-device-width : 480px ) { #veintiseis { color : red } } /* Safari 2 - 3.1 */ html [ xmlns *= "" ] :root #trece { color : red } /* Safari 2 - 3.1, Opera 9.25 */ *| html [ xmlns *= "" ] #catorce { color : red } /* Everything but IE6-8 */ :root *> #quince { color : red } /* IE7 */ *+ html #dieciocho { color : red } /* IE 10+ */ @media screen and ( -ms-high-contrast : active ), ( -ms-high-contrast : none ) { #veintiun { color : red ; } } /* Firefox only. 1+ */ #veinticuatro , x :-moz-any-link { color : red } /* Firefox 3.0+ */ #veinticinco , x :-moz-any-link , x :default { color : red } /* FF 3.5+ */ body :not ( :-moz-handler-blocked ) #cuarenta { color : red ; } /***** Attribute Hacks ******/ /* IE6 */ #once { _color : blue } /* IE6, IE7 */ #doce { * color : blue ; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color /**/ : blue } /* IE6, IE7, IE8, but also IE9 in some cases :( */ #diecinueve { color : blue \ 9 ; } /* IE7, IE8 */ #veinte { color /*\**/ : blue \ 9 ; } /* IE6, IE7 -- acts as an !important */ #veintesiete { color : blue ! ie ; } /* string after ! can be anything */ /* IE8, IE9 */ #anotherone { color : blue \ 0 / ;} /* must go at the END of all rules */ /* IE9, IE10 */ @media screen and ( min-width :0 \ 0 ) { #veintidos { color : red } }

If you’d like to take a gander by yourself:

Test page with all these hacks present.

View the test page at browsershots.org

(Thx to Webdevout, Evotech, and Jeffrey, porneL, and commenters.)

I should point out I’m not including weird hacks like the voice-family ones or anything particularly ugly.

Somewhat related…

Here are the most concise browser sniffs I’ve seen. (Not that browser sniffing is good or anything…)

Freeform addendum

2011.05.23: Okay some freeform notes from recent research. hopefully i’ll clean these up later….



2012.11.10: Link to keith clark’s @media hacks. They are pretty hot.

Mathias wrote about safe CSS hacks Read that. Also I should clarify which of the hacks on this page are recommended and which are …. tricky and nasty.. (which is many of them)…

Mathias is also on the hunt for an IE8-only CSS hack. Hope we unearth one!

Siggi, in the comments wrote about the // comment hack to match IE6, 7:

1 2 min-height :300px ; // height :300px ; /* matches only IE6, IE7 */

Then the CSS magician Thierry Koblentz offered up these selector hacks…

1 2 3 selector , x :-IE7 { } /* IE7 only */ selector , { … } /* lte ie7 */ .suckyie6.someClass { … } /* lte ie6 */

The last one is done via the ie6 .double.class bug – the .suckyie6 class could be anything you’re not using.

And the skillful necolas posted more details on IE css hacks: