El 18 de octubre de 2006, IE 7 fue oficialmente lanzado, prometiendo un sinnúmero de mejoras, entre ellas, mejor soporte para estándares.
Ya era hora.
Francamente, hace rato que necesitaba una actualización, sobre todo teniendo en cuenta que aún es el navegador más usado, factor que claramente hay que tener en cuenta a la hora de diseñar un sitio: o lidias con sus históricas deficiencias, o pierdes una cantidad generosa de visitas.
Pero las cosas han cambiado, y el otrora indolente navegador se ha vuelto un tipo más amable y tolerante, casi simpático.
El único problema es que este mejor soporte hizo que los viejos hacks que hacían posible el milagro que IE desplegara un sitio con mediana decencia, ya no sirvan, porque se basaban en errores que fueron corregidos en la versión 7. De hecho, desde el año 2005 que Microsoft llamaba a prescindir de los hacks (rarísimo viniendo de ellos) para no tener problemas de compatibilidad con IE 7.
Desde entonces, la recomendación ha sido dejar de usar hacks en tus archivos CSS, y ocupar los olvidados comentarios condicionales para discriminar con precisión las distintas versiones de IE y proporcionarles las declaraciones que necesiten.
Y ahora que noto una creciente cantidad de visitantes que usan el mesiánico navegador, me parece pertinente tocar el tema.
Cómo funciona
La idea es simple. La estructura es como sigue:
-
<!--[if IE 6]>
-
Declaraciones para IE 6
-
<![endif]-->
Para todos los navegadores (exceptuando IE win desde la versión 5 en adelante) esto no es más que un comentario. Todo lo que va dentro de <!-- --> no es ejecutado y el navegador lo salta, mientras que para la familia windows de IE, al leer el comentario y toparse con el primer if ejecuta su contenido.
Lamentablemente, como se tratan de comentarios condicionales, solo pueden ser incluídos en archivos HTML y no en un archivo CSS, que hubiese sido, en mi humilde opinión, más conveniente. Nada es perfecto.
De esta forma podemos servir CSS para una versión específica, por ejemplo, si queremos algo solo para IE 5.5, sería:
-
<!--[if IE 5.5]>
-
Declaraciones para IE 5.5
-
<![endif]-->
Y ojo, que también podemos ocuparlos para ejecutar javascript:
Existen variaciones para apuntar a un grupo de versiones:
-
<!--[if gte IE 6]>
-
IE iguales o superiores a la versión 6
-
<![endif]-->
-
<!--[if lt IE 6]>
-
IE menores a la versión 6
-
<![endif]-->
-
<!--[if lte IE 6]>
-
IE menores o iguales a la versión 6
-
<![endif]-->
-
<!--[if gt IE 6]>
-
IE superiores a la versión 6
-
<![endif]-->
-
<!--[if !IE]>
-
Este navegador NO ES IE
-
<![endif]-->
Algunos detalles:
gt: greater than, superior a.lt: less than, menor a.gte: greater than or equal to, superior o igual a.lte: less than or equal to, menor o igual a.!: El operador no. Actúa al revés, negando la expresión que le sigue.
¿Alguna alternativa?
Claro, pero son menos fiables o más complicadas.
La verdad es que habrá que acostumbrarse. Por la manera en que habitualmente trabajo (y a muchos les pasará lo mismo) hubiese preferido alguna solución que pudiera aplicarse al CSS mismo, y no algo en el documento HTML .
De todas formas, era cuestión de tiempo tener que lidiar con semejante fastidio: tarde o temprano Microsoft mejoraría IE .
Y convengamos que es algo más que grato que el navegador más usado en el mundo mejore.
Lo único que espero es que no tenga que esperar otros 6 años para una actualización.
Actualización
Gracias al comentario de Francisca, me di cuenta de que faltaba algo bien relevante. Hay ciertos hacks que son considerados potencialmente peligrosos y que deberían ser pasados a otra hoja de estilos usando los comentarios condicionales:
- El hack de Owen. Ejemplo:
head:first-child+body .myClase {} - StarHtmlHack. Ejemplo:
* html{ } - ChildHack. Ejemplo:
body > #miElemento { } - Head + body selector. Ejemplo:
head+body #miElemento { }
Comentarios
Gracias por los consejos.
Habra que acostumbrarse. Todos los hacks hay que pasarlos a otra css?
Salu2
Hola Francisca. Bien buena tu pregunta, me faltó agregar ese pequeño detalle =}
La idea es empezar a hacer hojas de estilo apuntando a cada navegador, pero efectivamente hay hacks considerados peligrosos.
Actualicé el post con esa info. Gracias por tu comentario.
¡Que tal Roberto!. Te comento que para mi la solución definitiva es algo que va a llevar tiempo en ser implementada, pero que a la larga nos va a dejar a todo más que contentos y esa solución es Firefox. En realidad, no es solo Firefox sino todos los navegadores que respeten los estandares. Todos tenemos que dar nuestro pequeño aporte difundiendo este navegador así de una vez por todas nos olvidamos de infame IE en cualquiera de sus sabores.
Y de paso te recomiendo Flock que es de la familia Mozilla. Muy bueno. Y, además, le podes instalar la Web Developer Tool.
Eso es todo. Fue un gusto.
Atte,
Kabuki.
exelente rata, solo falta jquery y de regreso a la banca