Paul Irish

Making the www great

Browser CSS Hacks

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}
}
Check out the @media block CSS hacks from Keith Clarke!

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…)

Update 2009.06.03 - I added the suggestions left on Ajaxian and in the comments and updated the browser versions to consider Safari 4, IE 8, and Chrome 2.

Update 2009.08.03 - I added some new Firefox hacks from @pornelski, which are very unique in that the target selector is not a child like the rest of them. More explanation on his site.

Update 2009.11.10 - Added #prop: value IE<=7 hack. I prefer it much less to *prop.

Update 2010.01.24 - Added prop: value!ie hack. Thx @miketaylr for the tip.

Update 2010.04.07 - Clarification on :nth-of-type(n) from Estelle Weyl

Update 2011.04.11 - the new \0/ hack from here and here. It’s invalid and must go at the end of all other rules.. so it’s a pretty dangerous hack, but at the same time.. its a happy arms-raised guy, so I guess it balances out. :)

Update 2011.05.18 - updated the \0/ and \9 one to note that it works in IE9 as well. thx Mathias Bynens.

Update 2011.05.19 - added :not(:-moz-handler-blocked) one from lea verou.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* Property prefix hacks */

/* IE6 only - any combination of these characters */
_ - £ ¬ ¦

/* IE6/7 only - any combination of these characters */
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |


/* @media hacks */

/* IE6/7 only (via Keith Clarke) */
@media screen\9 { }

/* IE6/7/8 (via Keith Clarke) */
@media \0screen\,screen\9 {}

/* IE8 (via Keith Clarke) */
@media \0screen { }

/* IE8/9 */
@media screen\0 { }

Comments