Come fare un foglio di stile specifico Chrome / Opera?

Question

Ho bisogno di fare Chrome / Opera hack a causa di uno script di sostituzione dei font voluto dal cliente che rompe le cose ... questo è triste, ma tutto funziona in IE6-7, FF2-3 e Safari. Non ho modo di fissare lo script stesso, posso incidere solo circa usando CSS e HTML.

che sto cercando di fare qualcosa nelle linee di:

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

E 'possibile?

Ho visto questo modo di fare correzioni specifiche cromati come:

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

E 'questo lavoro? c'è un modo più facile? Che dire di Opera?

Grazie!

Answer 1

Un modo javascript pulito per fare questo: http://rafael.adm.br/css_browser_selector/

annunci del browser classi specifiche per il tag body del codice HTML che si può usare nel CSS come:

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

Spero che questo aiuti.

Answer 2

hack Evitare CSS. Essi si romperà.

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

Fai CSS applicare solo per Opera 11?

Come rendere CSS visibili solo per Opera

futuro mod prova CSS per LTE Opera 10

Answer 3

per Google (e Safari) si può semplicemente utilizzare il seguente;

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

questo caricherà webkit specifica foglio di stile. Il 'tipo' può essere chiamato quello che vuoi, ma deve essere incluso.

Devi solo andare avanti e creare il foglio di stile come ti pare e tutti i browser non-WebKit sarà semplicemente ignorarlo.

Dovrete usare gli hack sopra per l'Opera. Di seguito ha lavorato meglio per me:

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

L'ho usato per caricare @ font-face dichiarazioni specifiche del browser.

Answer 4

Non ho ancora testato questa soluzione, ma secondo questo blog , si potrebbe provare la seguente per 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 (tutte le versioni)
.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 (tutte le versioni), Camino, SeaMonkey
.ffxx - Firefox xx (xx cambiamento con il numero di versione specifica) nuovo
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (Tutti le versioni)
.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 (tutte le versioni)
.chromexx - Chrome xx (xx cambiamento con il numero della versione specifica) nuovo
.safari - Safari (tutte le versioni) nuovo
.iron - SRWare Iron

    .. [Codice di OS] [codice Browser] .yourclass {padding-left: 5px; font-size: 14px}
body {background-color: # 000}
corpo .ie8 {background-color: # 111} (specifico per Internet Explorer 8.x)
.win. corpo IE8 {background-color: # 222} (specifico per Internet Explorer 8.x, su Microsoft Windows tutte le versioni)
.opera body {background-color: # 333} (Opera tutte le versioni)
.ff15 corpo {background-color: # 444} (specifico per Firefox 15.x)
.linux.gecko body {background-color: # 555} (Firefox, Camino, SeaMonkey tutte le versioni, su x11 e Linux)
< br> .ie7 #right, .ie7 #left {width: 320px}
    

Per ulteriori informazioni, visitare questo link http://cssbs.altervista.org/

Answer 6

Basta ricordare che: "sniffing User-Agent è baaaddd"

Non è e non sarà mai una buona pratica.

E 'solo dolore nel culo per mantenere un sito web dove User-Agent sniffing è implementata.

Si dovrebbe preferire i fogli di stile separati, o hack CSS se sono in condizioni di scarsa quantità o se non si ha il tempo di fare più fogli di stile.

Per Opera si può usare questo trucco:

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

E purtroppo, ogni Chrome hack CSS sono anche applyed a Safari.

Non c'è modo di separare i 2 rendering Salvo per le vecchie versioni di Safari (<= Safari3 se ricordo bene)