Racó tècnic

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:

• Otro hack CSS para Safari @ Anieto
• CSS hacks for differents versions of Firefox @ Perishable Press
• CSS hack for Google Chrome and Safari 3.1 @ Evotech
• CSS hack for Internet Explorer 8 @ Acid Martin
• Hacks CSS para todos los navegadores… @ Drauta

Entrades relacionades:

1. Color Explorer
2. Spoon App Studio: Cuelga tus aplicaciones en internet para usarlas con el navegador
3. Cracking cuenta premium de Megaupload vía Firefox
4. Smashing magazine: Diferencias entre IE6, IE7 e IE8
5. Crear transición de imágenes para Gallery2 con jQuery

Programació, Web CSS, Gecko, Google Chrome, Internet Explorer, Opera, Safari