Racó tècnic

Hablando de CSS, hoy he encontrado (como siempre por casualidad, buscando otra cosa XD) una guia con las diferencias entre MSIE6, MSIE7 y MSIE8. Que propiedades soportan cada uno en función de la versión.

Muchas de ellas las hemos aprendido a base de cabezazos contra la pantalla, pero la verdad es que esta guia está realmente bien, siempre hay alguna cosilla que no conoces.

Recomiendo especialmente el apartado donde hablan de “Significant Bugs and Incompatibilities” , donde detallan todos los errores que nos encontramos al maquetar en los diferentes navegadores de microsoft.

y por supuesto para el que no la conozca, visitad smashing magazine, es genial.

• smashing magazine: http://www.smashingmagazine.com/
• Articulo referenciado: CSS diferences in Internet Explorer 6, 7 and 8

Disseny CSS, IE6, IE7, IE8, Internet Explorer, MSIE6, MSIE7, MSIE8

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

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