Targeting specific Browsers with CSS

Categories: HTML/ColdFusion

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!

Add Comment

Leave this field empty


If you subscribe, any new posts to this thread will be sent to your email address.