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

tengo que hacer cromo/Ópera 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, FF2-3 y Safari. No tengo forma de arreglar el script en sí, solo puedo modificarlo usando CSS y HTML.¿Cómo hacer una hoja de estilo específica de Chrome/Opera?

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!

Fuente

2009-06-03 marcgg

Me encanta la forma que pueda identificar la ópera en javascript si (window.opera) {/ * ópera acción específica * /} Tal vez usted podría usar esto para añadir estilo específico para ello. No sé acerca de Google Chrome. –

Gracias, si no puedo encontrar una manera de hacer un CSS específico, esto ayudará – marcgg

¿Por qué no puedes jugar con el JavaScript?Si no puede tocar el archivo JavaScript, ¿puede anular una función o dos de las suyas con su propio código? – Nosredna

Una limpia Javascript manera de hacer esto: http://rafael.adm.br/css_browser_selector/

It anuncios navegador clases específicas 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.

Fuente

2009-06-03 19:13:28

Esto no es exactamente lo que estaba buscando, pero es un enfoque bastante limpio ya que aparentemente no hay una forma pura de hacerlo. ¡Gracias! – marcgg

¡Puede que no sea "puro" pero resuelve el problema! Gracias. – fmz

maravilloso :-) :-) –

No he probado esta solución, pero de acuerdo con this blog entry, 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); 
}

Fuente

2009-06-03 15:54:17 Lobstrosity

Dijo que solo puede tocar el HTML y el CSS, pero no el JavaScript. – Nosredna

La forma en que lo leo, no puede modificar los archivos JavaScript externos que reemplazan la fuente real, pero si puede editar el HTML, siempre podría agregar una etiqueta de script :) – Lobstrosity

Sí, puedo, pero preferiría no si es posible Si me dices que esa es la única forma, entonces ... ¡supongo que no tengo otras opciones! – marcgg

hacks Evitar CSS. Ellos 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; 
    } 
}

Make CSS apply only for Opera 11?

How to make CSS visible only for Opera

Future proof CSS hack for LTE Opera 10

Fuente

2011-08-22 08:36:30 XP1

El de Chrome no funciona para mí (Versión 22.0.1229.94 m) –

de Google (y Safari) puede simplemente usar el siguiente;

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

esto cargará una hoja de estilo específica de webkit. El 'tipo' puede nombrarse como quieras, pero debe incluirse.

sólo 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.

Fuente

2011-10-01 12:43:20

agrega http petición – Brownrice

Sólo recuerde que: "User-Agent olfateando se baaaddd"

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

Es un fastidio mantener un sitio web donde se implemente el rastreo de agente de usuario.

Debería preferir hojas de estilo separadas, o css hacks si están en poca cantidad o si no tiene tiempo para hacer varias 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 Chrome CSS hacks también están applyed a Safari.

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

Fuente

2012-02-19 10:18:41 TwystO

.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 (cambio xx con número de versión específica) nuevo
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (todas las versiones)
.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 versión específica) nuevos
.safari - Safari (Todas las versiones) nueva
.iron - SRWare Iron

. [Código OS]. [Código del navegador] .yourclass {padding-left: 5px; font-size: 14px}

cuerpo {background-color: # 000}
.ie8 cuerpo {background-color: # 111} (Específico para Internet Explorer 8.x)
.win.ie8 body {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 body {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)

.ie7 #right, .ie7 #left {ancho: 320px}

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

Fuente

2013-06-28 07:13:16 Sabir

Gracias, muy útil – Denees

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

Respuesta

Cuestiones relacionadas