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?

Eckhart

I love the way you can identify opera in javascript if(window.opera) { /*opera specific action*/ } Maybe you could use this to add specific style for it. I don't know about Google Chrome. – Caulk

Thanks, if I can't figure out a way to do specific CSS this will help – Eckhart

Why can't you mess with the JavaScript? If you can't touch the JavaScript file, can you override a function or two of theirs with your own code? – Palpate

The thing causing the issue is a script created by the client and they don't want me to modify it... I could make JS fixes to update the JS using andrija's anwser or lobstrosity's, but I'd prefer do something cleaner. I thought there was a CSS conditionnal for Chrome and Opera – Eckhart

Answer 1

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;
}

Ryley

This is not exactly what I was looking for, but it's a clean enought approach since apparently there is no pure CSS way of doing that. Thanks! – Eckhart

Thank you for sharing this. Gonna be a part of the base setup for all my projects! Thanks a million – Okie

Answer 2

Avoid CSS hacks. They will break.

Google Chrome:

@media not all and (-webkit-min-device-pixel-ratio:0)
{  
    #example
    {
        width: 200px;
    }
}

Safari:

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #example
    {
        width: 200px;
    }
}

Opera:

@media not screen and (1)
{
    #example
    {
        width: 200px;
    }
}

Make CSS apply only for Opera 11?

How to make CSS visible only for Opera

Future proof CSS hack for LTE Opera 10

Diversity

This is also a hack, and has broken. The Chrome version no longer matches Chrome, the Safari version matches Chrome and Firefox. – Benzene

Answer 3

for Google (and Safari) you can simply use the following;

<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />

this will load a webkit specific style-sheet. The 'type' can be named whatever you want but has to be included.

You just go ahead and create your stylesheet as you please and all non-webkit browsers will simply ignore it.

You'll have to use the hacks above for the Opera. The following worked best for me:

@media not screen and (1)
    {
    #example
    {
    width: 200px;
    }
}

I've used it to load browser-specific @font-face declarations.

Fauve

adds http request – Senility

Answer 4

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);
}

Keffiyeh

He said he can only touch the HTML and CSS, but not the JavaScript. – Palpate

The way I read it, he can't modify the external JavaScript files that do the actual font replacement, but if he can edit the HTML, he could always add a script tag :) – Keffiyeh

Yes I can, but I'd rather not if possible. If you tell me that's the only way then... I guess I don't have any other options ! – Eckhart

Answer 5

.ie - Internet Explorer (All versions)
.ie10 - Internet Explorer 10.x
.ie9 - Internet Explorer 9.x
.ie8 - Internet Explorer 8.x
.ie7 - Internet Explorer 7.x
.ie6 - Internet Explorer 6.x
.ie5 - Internet Explorer 5.x
.gecko - Firefox (all versions), Camino, SeaMonkey
.ffxx - Firefox xx (change xx with number of specific version) new
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (All versions)
.opera12 - Opera 12.x
.opera11 - Opera 11.x
.opera10 - Opera 10.x
.opera9 - Opera 9.x
.opera8 - Opera 8.x
.konqueror - Konqueror
.webkit - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.chrome - Google Chrome (All versions)
.chromexx - Chrome xx (change xx with number of specific version) new
.safari - Safari (All versions) new
.iron - SRWare Iron

.[OS code].[Browser code] .yourclass { padding-left:5px; font-size:14px }

body { background-color:#000 }
.ie8 body {background-color:#111 } (Specific for Internet Explorer 8.x)
.win.ie8 body { background-color:#222 } (Specific for Internet Explorer 8.x, on Microsoft Windows all versions)
.opera body { background-color:#333 } (Opera all versions)
.ff15 body { background-color:#444 } (Specific for Firefox 15.x)
.linux.gecko body { background-color:#555 } (Firefox, Camino, SeaMonkey all versions, on x11 and Linux )

.ie7 #right, .ie7 #left { width:320px }

For more information visit this link http://cssbs.altervista.org/

Separator

Answer 6

Just remember that : "User-Agent sniffing is baaaddd"

That's not and will never be a good practice.

It's just pain in the ass to maintain a website where User-Agent sniffing is implemented.

You should prefer separated stylesheets, or css hacks if they're in low quantity or if you don't have time to make multiple stylesheets.

For Opera you can use this trick :

@media all and (-webkit-min-device-pixel-ratio:10000),
    not all and (-webkit-min-device-pixel-ratio:0) { 
     #id {
         css rule;
     }
 }

And Sadly, every Chrome css hacks are also applyed to Safari.

There's no way to separate the 2 renderings excepted for the old versions of Safari (<= safari3 if I remember well)

Externality