css - paginas - link rel= stylesheet para que sirve

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

Question

Necesito hacer hacks de chrome / opera debido a un script de reemplazo de fuente buscado por el cliente que rompe cosas ... esto es triste pero todo funciona en IE6-7, FF2-3 y Safari. No tengo forma de arreglar el script en sí, solo puedo hackearlo usando 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 arreglos específicos de Chrome como:

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

¿Esto funciona? ¿Hay alguna forma más simple? ¿Qué pasa con la ópera?

¡Gracias!

Answer 1

.ie - 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 (cambie xx con el 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 - Chrome xx (cambie xx con el número de versión específica) nuevo
.safari - Safari (Todas las versiones) nuevo
.iron - SRWare Iron

. [Código del SO]. [Código del navegador] .yourclass {padding-left: 5px; tamaño de fuente: 14px}

cuerpo {fondo-color: # 000}
.ie8 body {background-color: # 111} (Específico para Internet Explorer 8.x)
.win.ie8 body {background-color: # 222} (Específico para Internet Explorer 8.x, en todas las versiones de Microsoft Windows)
.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 {width: 320px}

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

Answer 2

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

Ópera:

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

¿Hacer que CSS aplique solo para Opera 11?

Cómo hacer CSS visible solo para Opera

Prueba de futuro hack de CSS para LTE Opera 10

Answer 3

No he probado esta solución, pero de acuerdo con esta entrada de blog , puedes probar 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 4

Solo recuerda que: "La detección de User-Agent es baaaddd"

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

Es una molestia mantener un sitio web donde se implementa el rastreo de User-Agent.

Debería preferir hojas de estilo separadas o hacks css si están en poca cantidad o si no tiene tiempo para hacer varias hojas de estilo.

Para Opera puedes usar este truco:

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

Y, lamentablemente, todos los hacks css de Chrome también se aplican a Safari.

No hay manera de separar las 2 representaciones exceptuando las versiones antiguas de Safari (<= safari3 si recuerdo bien)

Answer 5

Una forma javascript limpia de hacer esto: http://rafael.adm.br/css_browser_selector/

Incluye clases específicas del navegador para la etiqueta del cuerpo de su html que puede usar en su css como:

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

Espero que esto ayude.

Answer 6

para Google (y Safari) puede simplemente usar lo siguiente;

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

Esto cargará una hoja de estilo específica del webkit. El ''tipo'' se puede nombrar como se desee, pero debe incluirse.

Simplemente siga adelante y cree su hoja de estilo como desee y todos los navegadores que no sean de webkit simplemente lo ignorarán.

Tendrás que usar los hacks de arriba para la Opera. Lo siguiente funcionó mejor para mí:

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

Lo he usado para cargar las declaraciones de @ font-face específicas del navegador.