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

Answer 1

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

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)

Answer 2

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 3

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.

Answer 4

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.

Answer 5

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

Answer 6

.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/