Como fazer uma folha de estilo específica Chrome / Opera?

Question

Eu preciso fazer chrome / opera hacks por causa de um script de substituição de fonte procurado pelo cliente que quebra coisas ... isso é triste, mas tudo está funcionando em IE6-7, FF2-3 e Safári. Eu não tenho nenhuma maneira de corrigir o script em si, só posso cortar em torno dele usando CSS e HTML.

Eu estou tentando fazer algo nas linhas de:

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

É possível?

Eu vi esta forma de fazer correções específicas cromo como:

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

É este trabalho? Existe uma maneira mais simples? E sobre Opera?

Obrigado!

Answer 1

Uma maneira javascript limpa para fazer isso: http://rafael.adm.br/css_browser_selector/

anúncios classes específicas do navegador para a tag do corpo do seu HTML que você pode usar em seu css como:

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

Espero que isso ajude.

Answer 2

hacks Evite CSS. Eles vão quebrar.

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

aplicar apenas para Opera 11?

Como fazer CSS visível apenas para o Opera

para LTE Opera 10

Answer 3

para o Google (e Safari) você pode simplesmente usar o seguinte;

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

este irá carregar um estilo de folha webkit específico. O 'tipo' pode ser chamado o que quiser, mas tem de ser incluído.

Você só ir em frente e criar seu estilo quando quiser e todos os navegadores não-webkit vai simplesmente ignorá-lo.

Você terá que usar os hacks acima para o Opera. A seguir funcionou melhor para mim:

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

Eu usei-o para carregar específicas do navegador @ declarações font-face.

Answer 4

Eu não testei essa solução, mas de acordo com neste blog entrada , você pode tentar o seguinte para 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 (todas as versões)
.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 (todas as versões), Camino, SeaMonkey
.ffxx - Firefox xx (xx mudança com número de versão específica) nova
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (All versões)
.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 (Todas as versões)
.chromexx - xx Chrome (xx mudança com o número da versão específica) nova
.safari - Safari (Todas as versões) nova
.iron - SRWare Iron

. [Code OS] [código do navegador] .yourclass {padding-left:. 5px; font-size: 14px}
body {background-color: # 000}
.ie8 body {background-color: # 111} (específico para Internet Explorer 8.x)
.win. corpo ie8 {background-color: # 222} (específico para Internet Explorer 8.x, em Microsoft Windows todas as versões)
.opera body {background-color: # 333} (Opera todas as versões)
.ff15 corpo {background-color: # 444} (específico para Firefox 15.x)
.linux.gecko body {background-color: # 555} (Firefox, Camino, SeaMonkey todas as versões, em x11 e Linux)
< br> .ie7 #right, .ie7 #left {width: 320px}

Para obter mais informações, visite este link http://cssbs.altervista.org/

Answer 6

Basta lembrar que: "User-Agent sniffing é baaaddd"

Isso não é e nunca será uma boa prática.

É apenas dor na bunda para manter um site onde User-Agent sniffing é implementado.

Você deve preferir folhas de estilo separadas, ou hacks CSS se eles estão em baixa quantidade ou se você não tem tempo para fazer várias folhas de estilo.

Para Opera você pode usar esse truque:

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

E, infelizmente, a cada Chrome hacks CSS são também applyed para Safari.

Não há nenhuma maneira de separar as 2 representações excetuados para as versões antigas do Safari (<= safari3 se me lembro bem)