如何制作Chrome / Opera特定的样式表？

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

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

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.

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

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/

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)