Comentarios Condicionales para IE

Escrito por Kemie Guaida en 11.10.04

No es ningún secreto que Internet Explorer suele interpretar las hojas de estilo... digamos de un modo peculiar. Generalmente recurrimos a parches (hacks) para corregir los errores de IE, pero existe una manera más sencilla y práctica: los comentarios condicionales de IE.

Una gran idea

Microsoft tuvo una excelente idea: una manera de mostrar cierto código a Internet Explorer (versión 5 en adelante, sólo en Windows), pero ocultarlo de otros navegadores, poniéndolo dentro de un comentario. Incluso es posible poner código que sea leido exclusivamente por la versión 5.0, 5.5 o 6. Esto nos permite detectar la versión del browser sin necesidad de usar javascript o algún lenguaje de servidor.

Como funcionan

La estructura básica es un comentario

<!-- -->

Pero dentro de ese comentario, ponemos una instrucción especial, que hace que IE interprete lo que hay adentro como código y no comentario. Si queremos que algo se vea en IE 5.0, 5.5 y 6, pondríamos:

<!--[if IE]>
[Aquí va nuestro código]
<![endif]-->

Si queremos que algo únicamente se muestre en IE 5.5, nuestra sintáxis sería así:

<!--[if IE 5.5]>
[Aquí va nuestro código]
<![endif]-->

También podemos especificar navegadores mayores o menores que cierta versión. Por ejemplo:

<!--[if gt IE 5.5]>
[Esto se mostrará a versiones posteriores a  IE 5.5. "gt" = mayor que]
<![endif]-->
<!--[if gte IE 5.5]>
[Esto se mostrará a IE 5.5 y versiones posteriores. "gte" = mayor que o igual]
<![endif]-->
<!--[if lt IE 6]>
[Esto se mostrará a  versiones anteriores a IE 6. "lt" = menor que]
<![endif]-->
<!--[if lte IE 6]>
[Esto se mostrará a IE 6 y versiones anteriores. "lte" = menor que o igual]
<![endif]-->

Dentro de nuestro comentario condicional podemos tener cualquier código. (Si ves esta página en Internet Explorer, verás unos ejemplos abajo.)

Usos y ventajas

En vez de utilizar hacks en las hojas de estilo, se pueden poner todas las correcciones en una hoja de estilos separada y ponerse dentro de comentarios condicionales, de esta manera:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

De esa manera los demás navegadores no ven esas correcciones, mantenemos nuestra hoja de estilos limpia y sin parches, y en el remoto caso que una versión futura de Internet Explorer corrija su modelo de cajas y multiples bugs, es muy fácil poder quitar los parches.

También podemos utilizar los comentarios para esconder propiedades exclusivas de Internet Explorer, como por ejemplo, las barras de desplazamiento con color. Son una funcionalidad que, aunque no es esencial, es práctica para los diseñadores. Si separamos esas propiedades de nuestra hoja de estilos principal, y sólo dejamos que Internet Explorer la vea, tenemos código válido y barras de color para IE.

Si sólo queremos una propiedad de css específica para la página en cuestión, también podemos ponerla así:

<!--[if IE]>
<style>
#miregla {
	color:#333333;
}
</style>
<![endif]-->

Podemos también utilizar javascript:

<!--[if IE 6]>
<SCRIPT LANGUAGE="Javascript">
alert("Estás usando Internet Explorer 6");
</SCRIPT>
<![endif]-->

Conclusiones

Los comentarios condicionales nos permiten escribir código específico para Internet Explorer sin afectar a otros navegadores. Nos permiten evitar parches y tener código más limpio, válido y estructurado.

Actualización

28-04-2005

Si tienes varias versiones de IE instaladas en tu computadora, los comentarios condicionales no funcionarán, ya que checa la versión "oficial" de IE, es decir la que tiene registrado el sistema. Para poder checar tus comentarios condicionales tienes que hacer algunas modificaciones al registro de sistema de tu computadora. Manfred Staudinger tiene un tutorial paso a paso en Position is Everything.

También vale la pena notar que los comentarios condicionales no funcionan para IE en Mac

Enlaces Relacionados:

Especificación de los Comentarios Condicionales

Comentarios

15 octubre 2004, 08:16corsaria
Muy interesante y bien explicado. :)
16 octubre 2004, 03:52Camilo Kawerín
¡Excelente! Yo estaba en la búsqueda de un método que me permitiera emparchar un diseño en el que estoy trabajando sin recurrir a hacks tipo *\ y demás. Éste es el sitio.
30 noviembre 2004, 03:40Loredana
Solamente queria comentar que a mi Explorer me ha funcionado excelentemente, y siempre.

Firefox está de moda, pero Explorer es excelente.
14 febrero 2005, 05:09Luis de la Peña
¿Pero de verdad pens&aacute:is que es mejor definir un comportamiento que va a ser comú a todo el contenido, n veces en cada una de las páginas de mi sitio envez de centralizado en una hoja css? .. y si cambia la particar interpretación de IE de las cajas ¿Es más fácil cambiar dos o tres ocurrencias en cada una de las 150 páginas (300-500 cambios) que en una sola? Huy, huy, huy … Me parece que este articulo necesita una nueva reflexión.
14 febrero 2005, 16:14Kemie
Luis, pero si notas los ejemplos, verás que es perfectamente posible utilizar una hoja de estilos centralizada que se utilice para internet explorer, que facilmente puede ser actualizada o eliminada en el raro caso que Microsoft actualice Internet Explorer ;).
El punto es poder corregir los errores de IE de la forma menos intrusiva posible, por supuesto.
15 febrero 2005, 01:09Miguel Sánchez
No conocía esta técnica que evita tener que usar hacks. Enhorabuena por el artículo. Me ha parecido interesante. Sólo una duda ¿Además de la versión, se podría especificar que es para un IE de Mac?

Mil gracias y saludos.
2 marzo 2005, 04:58Ismael
Muy bueno el truco. Ayuda a mantener el orden en los estilos. En la mayoria de los casos, sin embargo, hay muchos estilos simples (principalmente textos) comunes a todos los browsers que no necesitan hacks. Me imagino que lo ideal sería reunir estos estilos en una hoja comun, y luego separar la diagramación en hojas distintas para cada browser, distinguidas gracias a este truco.
Loredana: si, IE funciona bien porque la mayor parte de los sitios aún están diseñados con tecnologías específicas para IE. Desde el punto de vista del desarrollo de sitios y aplicaciones Web, la falta de rigurosidad de IE en el cumplimiento de los estándares encarecen enormemente el desarrollo y la distribución a distintas plataformas. Desde el punto de vista del usuario de un sitio, sin embargo, estas deficiencias no son tan importantes.
30 marzo 2005, 21:11Carlos
al utilizar este método con los emuladores de PC de IE 5 e IE 5.5 teniendo instalado el 6 he encontrado que el navegador se identifica siempre como el 6, por lo que los comentarios no funcionan ¿se puede arreglar esto o hay que usarlo en un PC con el IE 5.x instalado?
11 mayo 2006, 02:29Xandas

Loredana: prueba Opera 9
y después me cuentas lo que estás perdiendo…
18 mayo 2006, 15:54Jurjur

yo he probado a añadir el comentario para explorer y desviarlo a un css aparte, pero no me permite corregir especificaciones ya dadas en el css general, sino solo añadir nuevas (es decir, si el css general tiene especificado un margin-top de 10px y a la especifica de ie le añado 200px, coge los 10 px, pero si no especifico ningún margin-top en la general, entonces si me coge el margin-top de 200px…alguien sabe si se puede corregir esto?
16 julio 2006, 11:43AlexOnti

Jurjur: Me imagino que tu problema está en el orden de la cascada. Primero debes declarar la hoja de estilo general, y luego declara (en comentario condicional) la hoja de estilo específica para IE.

Ejemplo:
¿link rel="stylesheet" href="misestilos.css" type="text/css" /?
¿!--[if IE]?¿link rel="stylesheet" type="text/css" href="misestilos-ie.css" /?¿![endif]--?

Obvio, reemplaza ”?” con “mayor que” y “¿” con “menor que”. Sorry, pero ignoro cómo agregar pre a mi comentario.

En misestilos.css pones el margin-top:10px;
En misestilos-ie.css pones margin-top:200px;

Espero que esto resuelva tu problema… dos meses después, jejeje.
1 agosto 2006, 15:27James Peter

Yo aveces anvío mis documentos como aplication/xml, sin embargo hago uso de los comentarios adicionales para IE, pero ninguna de las que muestras en ésta sección, porque no funcionan así con documentos XML. Ver el siguiente enlace haciendo click aquí :http://groups.google.com.pe/group/webnewbie/browse_thread/thread/6d46825d35e01b51/9c60d3e3b7e3be05?lnk=st&q=&rnum=2&hl=es#9c60d3e3b7e3be05”
5 octubre 2006, 19:39luis

estoy recien haciendo este sitio para una gente amiga, aprendiendo sobre la marcha. en mozilla va perfecto pero en IE imposible verla completa solo sale el principio. probe con lo que jamespeter dice y otros mas sin exito. seria tan amable alguno de ver que falla ? muchas gracias
19 octubre 2006, 04:58Me again

Llegue aquí porque 2 días antes de la defensade mi tesis (como propia noob) decidí probar mi sitio en IE 6, ya q descuidadamente había trabajado solo en firefox, mi conclusion: maldito, maldito, maldito, maldito, maldito, maldito, maldito, maldito, maldito, maldito, maldito,maldito, maldito, maldito,
maldito,maldito, maldito, maldito, maldito, IE
27 diciembre 2006, 15:56jurjur

AlexOnti: muchas gracias, me sirvió...5 meses después, ahora me ha venido genial con el advenimiento del maligno IE7. Gracias
29 enero 2007, 12:53Almirante Von Web/.

He comprobado que, en ciertos casos, conviene poner los comentarios condicionales al final del body, o sea, “antes del cierre de las etiqueta”, ya que Explorer renderiza de modo incompleto la página.
21 marzo 2007, 17:36Yuri Sanz

Me parece muy interesante que dentro de un comentario se pueda poner un código con determinación, muy bueno.
3 octubre 2007, 17:41Freddy

Muy útil el contenido de la página.
12 noviembre 2007, 20:47chuchurex

Mil gracias Kermie por Diseñorama. Siempre es un lugar donde uno puede volver a utilizar el conocimiento que inunda sus páginas. Hoy fue el comentario especial para IE, pero todos los días uno puede desarrollar con CSS tranquilo, sabiendo que puede volver a Diseñorama para refrescar la memoria sobre los artículos que ya hemos leído.
10 diciembre 2007, 03:08jose luis

Este post es un clásico en el mundo del diseño web, felicitaciones.
10 diciembre 2007, 03:20jose luis

Cuando empezé con las hojas de estilo, este post fue de gran ayuda, muchas gracias
13 abril 2008, 19:52buenri

Merçi!!!
29 abril 2008, 18:31Raul

y como puedo poner un else, si es otro explorador???