css - paginas - link rel= stylesheet para que sirve
¿Cómo hacer una hoja de estilo específica de Chrome/Opera? (6)
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!
.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
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/
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?
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);
}
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)
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.
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.