Targeting specific Browsers with CSS

Posted by Dan on Apr 24, 2009 @ 4:26 PM

Pail Irish posted a nice concise list of CSS hacks for targeting specific browsers. While I'd love to avoid using hacks altogether, I just continually find cases where it's necessary so this list is a handy little reference:

/***** Selector Hacks ******/
 
/* IE 6 and below */
* html #uno  { color: red }
 
/* IE 7 and below */
*:first-child+html #dos { color: red } 
 
/* IE 7 and modern browsers */
html>body #tres { color: red }
 
/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 and below */
html:first-child #cinco { color: red }
 
/* Safari */
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  { background: #FFDECE; border: 2px solid #ff0000  }
}
 
/***** Attribute Hacks ******/
 
/* ie6 and below */
#once { _color:blue }
 
/* ie7 and below */
#doce { *color: blue } /* or #color:blue */
 
/* 'Modern Browsers' includes IE8, whether you agree or not.. :) */

I did notice that the "*" hack (i.e. "*color: blue") also seems to get picked up by IE8, while he lists the hack as for being for IE7 and below.

Paul even set up a test page with all the hacks for testing.

Nice job Paul!

Categories: HTML/ColdFusion

Add Comment

Leave this field empty