How to do a Chrome/Opera specific stylesheet ?

Question

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 1

I haven't tested this solution, but according to this blog entry, you could try the following for Chrome:

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
{
     var chromeCss = document.createElement("link");

     chromeCss.rel = "stylesheet";
     chromeCss.href = "ChromeStyle.css";

     document.getElementsByTagName("head")[0].appendChild(chromeCss);
}

Answer 2

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.