CSS hacks para Firefox, Internet Explorer, Chrome, Opera, Safari…
Todos sabemos lo divertido y emocionante que es hacer la compatibilidad crossbrowser de nuestras páginas web.
Por suerte para nosotros, existen un gran número de hacks CSS que podemos utilizar en cada una de las versiones de cada navegador para ayudarnos a poder mostrar por igual los contenidos de una web en todos los navegadores.
Partiré de este estilo:
.selector {
color: #CCCCCC;
}
Empezaré por Internet Explorer, dado que es para el que usualmente se necesitan más hacks:
Internet Explorer 6
.selector {
_color: #CCCCCC;
}
Recordad que IE6 no interpreta la propiedad (o palabra clave..) de CSS “!important” por lo que podéis jugar con ello (aunque no es lo más recomendable):
Internet Explorer 6 (!important)
.selector {
color: #CCCCCC !important;
color: #000000; /* Éste estilo sólo se aplicará a Internet Explorer 6 */
}
Internet Explorer 7 y anteriores:
.selector {
*color: #CCCCCC;
}
Internet Explorer 8
Este es un poco putilla, ya que el mismo hack de IE8 a veces lo interpreta IE7… así que, si nos interesa, primero habrá que poner algo que interprete únicamente IE7 y después hay que poner el hack de IE8:
/* Interpretado únicamente por IE7 (actúa como un !important) */
*:first-child+html .selector {
color: #CCCCCC;
}
.selector {
color /*\**/: #CCCCCC\9 /* Sin punto y coma!! */
}
Todas las versiones de Internet Explorer
.selector {
color: #CCCCCC\9 /* Sin punto y coma!! */
}
Internet Explorer 7 y demás navegadores modernos (incluido IE8)
html>body .selector {
color: #CCCCCC;
}
Todos los navegadores modernos (incluido IE8)
html>/**/body .selector {
color: #CCCCCC;
}
Opera 9.27 y anteriores
html:first-child .selector {
color: #CCCCCC;
}
Safari
html[xmlns*=""] body:last-child .selector {
color: #CCCCCC;
}
Safari 3+, Opera 9+, Firefox 3.5+ y Chrome 1+
body:nth-of-type(1) .selector {
color: #CCCCCC;
}
/* Otra opción... */
body:first-of-type .selector {
color: #CCCCCC;
}
/* Y otra más... */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector {
color: #CCCCCC;
}
}
Safari 3+ y Chrome 1+
@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector {
color: #CCCCCC;
}
}
/* Otra opción... */
body:nth-of-type(1) .selector{
color: #CCCCCC;
}
Todas las versiones de Firefox
@-moz-document url-prefix() {
.selector {
color: #CCCCCC;
}
}
Cualquier Gecko (incluido Firefox)
*>.selector {
color: #CCCCCC;
}
Firefox 1.5+
.selector, x:-moz-any-link, x:only-child {
color: #CCCCCC;
}
Firefox 2 y versiones anteriores
body:empty .selector {
color: #CCCCCC;
}
/* Otra opción... */
html>/**/body .selector, x:-moz-any-link {
color: #CCCCCC;
}
Firefox 3 (y quizás más nuevos)
html>/**/body .selector, x:-moz-any-link, x:default {
color: #CCCCCC;
}
No he probado todos ellos así que si veis alguno que no funciona, por favor, hacédmelo saber para que pueda buscar alguna alternativa (o eliminarlo…).
Además os invito a que añadáis cualquier hack de CSS que no haya puesto comentando esta entrada 
Páginas de referencia:
