Cómo hacer una hoja de estilo específica Chrome / Opera?

Question

Necesito hacer cromo / Ópera los cortes a causa de una secuencia de comandos de reemplazo de la fuente deseada por el cliente que rompe cosas ... esto es triste, pero todo está funcionando en IE6-7, y FF2-3 Safari. No tengo manera de fijar el propio guión, sólo puedo cortar alrededor de ella el uso de CSS y HTML.

Estoy tratando de hacer algo en la línea de:

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

¿Es posible?

vi esta forma de hacer las correcciones específicas de cromo como:

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

¿Es este trabajo? ¿Hay alguna forma más simple? ¿Qué hay de Opera?

Gracias!

Answer 1

Una forma limpia Javascript para hacer esto: http://rafael.adm.br/css_browser_selector/

anuncios navegador clases específicas para el cuerpo de la etiqueta del código HTML que puede utilizar en su css como:

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

Espero que esto ayude.

Answer 2

Evitar hacks CSS. Se romperán.

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

hacer aplicar CSS sólo para Opera 11?

Como hacer CSS visible sólo para Opera

futuro truco CSS prueba de LTE Opera 10

Answer 3

de Google (y Safari) sólo tiene que utilizar el siguiente;

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

Esto cargar una hoja de estilo webkit específico. El 'tipo' se puede nombrar lo que quiera, pero tiene que ser incluido.

Usted acaba de seguir adelante y crear su hoja de estilo como desee y todos los navegadores WebKit no simplemente se ignoran.

Vas a tener que usar los hacks anteriormente para la Opera. Los siguientes funcionaron mejor para mí:

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

Lo he utilizado para cargar @ font-face declaraciones específicas del navegador.

Answer 4

No he probado esta solución, pero de acuerdo con esta entrada del blog , usted podría intentar lo siguiente 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

.es - Internet Explorer (todas las versiones)
.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 las versiones), Camino, SeaMonkey
.ffxx - Firefox xx (xx cambio con el número de versión específica) nueva
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (Todo versiones) guía .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 las versiones)
.chromexx - cromo xx (xx cambio con el número de la versión específica) nueva
.safari - Safari (Todas las versiones) nueva
.iron - SRWare Iron

    .. [Código del sistema operativo] [código del navegador] .yourclass {padding-left: 5px; font-size: 14px}
body {background-color: # 000}
cuerpo .ie8 {background-color: # 111} (específico para Internet Explorer 8.x)
.win. cuerpo IE8 {background-color: # 222} (específico para Internet Explorer 8.x, en Microsoft Windows todas las versiones)
.opera body {background-color: # 333} (Opera todas las versiones)
.ff15 cuerpo {background-color: # 444} (específico para Firefox 15.x)
.linux.gecko body {background-color: # 555} (Firefox, Camino, SeaMonkey todas las versiones, en x11 y Linux)
< br> .ie7 #right, .ie7 #left {width: 320px}
    

Para obtener más información, visite este enlace http://cssbs.altervista.org/

Answer 6

Sólo recuerda que: "User-Agent sniffing es baaaddd"

Eso no es y nunca será una buena práctica.

Es sólo dolor en el culo para mantener un sitio web donde se implementa sniffing User-Agent.

Usted debe preferir las hojas de estilo separadas, o hacks CSS si están en baja cantidad o si no tiene tiempo para hacer múltiples hojas de estilo.

Para Opera puede utilizar este truco:

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

Y, por desgracia, cada hacks CSS Chrome son también applyed a Safari.

No hay manera de separar las 2 versiones exceptuados de las antiguas versiones de Safari (<= Safari3 si no recuerdo mal)