How to do a Chrome/Opera specific stylesheet?

marcgg picture marcgg · Jun 3, 2009 · Viewed 88.8k times · Source

I need to do chrome/opera hacks because of a font replacement script wanted by the client that breaks things... this is sad but everything is working in IE6-7, FF2-3 and Safari. I have no way of fixing the script itself, I can only hack around it using CSS and HTML.

I'm trying to do something in the lines of :

<!--[if IE 6]>
   <link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
<![endif]-->

Is it possible?

I saw this way of doing chrome specific fixes like:

body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

Is this working? Is there a simpler way? What about Opera?

Thanks!

Answer

Thomas Maas picture Thomas Maas · Jun 3, 2009

A clean javascript way to do this: http://rafael.adm.br/css_browser_selector/

It ads browser specific classes to the body tag of your html which you can use in your css like:

.opera #thingie, .chrome #thingie {
  do: this;
}

Hope this helps.