Diseñorama » Tutoriales

Comentarios Condicionales para IE

Escrito por Kemie Guaida en 11.10.04

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:

---

Comentarios

1. 15 octubre 2004, 09:16corsaria

   Muy interesante y bien explicado. :)
   

2. 16 octubre 2004, 04: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.
   

3. 30 noviembre 2004, 04:40Loredana

   Solamente queria comentar que a mi Explorer me ha funcionado excelentemente, y siempre.
   
   Firefox está de moda, pero Explorer es excelente.
   

4. 14 febrero 2005, 06: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.
   

5. 14 febrero 2005, 17: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.
   

6. 15 febrero 2005, 02: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.
   

7. 2 marzo 2005, 05: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.
   

8. 30 marzo 2005, 22: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?
   

9. 11 mayo 2006, 03:29Xandas

   Loredana: prueba Opera 9
   y después me cuentas lo que estás perdiendo…

10. 18 mayo 2006, 16: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?

11. 16 julio 2006, 12: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.

12. 1 agosto 2006, 16: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”

13. 5 octubre 2006, 20: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

14. 19 octubre 2006, 05: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

15. 27 diciembre 2006, 16:56jurjur

    AlexOnti: muchas gracias, me sirvió...5 meses después, ahora me ha venido genial con el advenimiento del maligno IE7. Gracias

16. 29 enero 2007, 13: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.

17. 21 marzo 2007, 18:36Yuri Sanz

    Me parece muy interesante que dentro de un comentario se pueda poner un código con determinación, muy bueno.

18. 3 octubre 2007, 18:41Freddy

    Muy útil el contenido de la página.

19. 12 noviembre 2007, 21: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.

20. 10 diciembre 2007, 04:08jose luis

    Este post es un clásico en el mundo del diseño web, felicitaciones.

21. 10 diciembre 2007, 04:20jose luis

    Cuando empezé con las hojas de estilo, este post fue de gran ayuda, muchas gracias

22. 13 abril 2008, 20:52buenri

    Merçi!!!

23. 29 abril 2008, 19:31Raul

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

24. 2 junio 2008, 13:36Gustavo

    Hola Kemie!
    Soy un nuevo visitante de tu página que desde ya agradezco sus contenidos de calidad.
    Quisiera saber una cosa: he leído el artículo sobre los comentarios para IE con respecto a barras de scroll con CSS, me parece muy interesante, pero ¿cómo escribo un CSS para darle estilo a la barra de scroll y que lo interpreten los demás navegadores? No sé si soy claro… necesito darle estilos a una barra de scroll a un iframe y no sé como hacerlo para el resto de los navegadores. He buscado información, pero no la encuentro…¿Me puedes ayudar??
    Gracias!

25. 2 junio 2008, 15:32Kemie

    gustavo,
    las propiedades de la barra de scroll son invención de microsofte solamente, no forman parte del estándar, por lo que no hay manera de hacer que otros navegadores lo interpreten
    espero te sirva esto, por lo menos para dejar de buscar :)

26. 5 septiembre 2008, 14:50Alberto

    Hola, para aclaración a todos los chapuzas que favorecen el uso de estos códigos condicionales para el caprichoso Internet Explorer (el peor pero mas usado explorador del Web) pegaré un comentario bastante bueno que pueden localizar en http://jcesar.artelogico.com/2007/03/30/incrustando-peliculas-flash-en-xhtml-valido/

    *******************************************
    Luis dijó en Noviembre del 2007 a las 20:04:

    No estoy de acuerdo con la solución que planteas.
    Efectivamente, como tú dices, el uso de los comentarios condicionales evita los problemas asociados a los trabajos flash y no requiere javascript. También es cierto que supera la validación del W3C, pero, lo que no tienes en cuenta, ni tú ni quienes piensan como tú, es que esa validación la estás pasando a base de engaños. Engañas al validador empleando comentarios condicionales que ocultan el código interpretable por el Internet Explorer. Ten presente que el validador se basa en la especificación del consorcio web, y esa especificación deja muy claro lo que es código interpretable y lo que son comentarios. Lo que tú estás haciendo es socavar esa verdad mediante una triquiñuela. Es un truco que engaña al validador, pero conspira contra la definición misma de la especificación (X)HTML. Los comentarios no son códigos interpretables. Esa es una verdad como la copa de un pino que Microsoft ha obviado, optando por ocultar dentro de ellos código interpretable (observa la maldad del planteamiento: ocultar algo que puede provocar consecuencias dentro de algo aparentemente inocuo).

    El uso de los comentarios condicionales es una mala práctica, por mucho que engañe al validador. Además, complica el código sin necesidad, obligando al creador a tener en mente dos imágenes de la web, según sea el Internet Explorer o no. Asimismo, le estás haciendo el juego a Microsoft al aceptar ese ninguneo al que somete a las especificaciones del W3C, de modo que cuando no se las salta, se las inventa o las interpreta de forma torticera.
    Con la especificación en la mano, lo que hay dentro de un comentario no debería interpretarse, y no hay más vuelta de hoja, salvo las que Microsoft quiera darle. Precisamente por eso engañas al validador.

    No sé lo que pensarás tú, pero estas formas de hacer las cosas, basadas en buscar al gato patas que no tiene, buscando trucos aquí y allá me parece que es atentar contra los intentos del W3C por fijar un estándar lo más claro posible. Asimismo, tampoco olvides que si mañana Microsoft pusiese fin a esta práctica, los códigos dejarían de ser útiles. A fin de cuentas es un recurso propietario de MS, y ellos pueden dejarte en la cuneta cuando quieran (lo que nos lleva, curiosamente, al caso EOLAS).
    Entiendo que el uso de javascript es una putada por culpa de la accesibilidad y el hecho de no ser un estándar del Consorcio, pero esto de los comentarios condicionales es un enfoque malicioso que mantiene la puerta abierta a las rarezas y excepciones.

    *******************************************
    Espero que los sensatos que realmente usamos el estándar estipulado por el W3C para mejorar y dar accesibilidad a la Web tomen en consideración el NO usar estos códigos condicionales, ya que lo pone muy claro en el comentario anterior.

    A los chapuzas que ignoren este comentario y que sigan dándole vida al explorador mas malo de la historia de Internet.

27. 21 octubre 2008, 13:26CardinalDash

    Como nuevo usuario en la maquetacion mediante capas solo dire maldito IE ^_^U

    Muy util el articulo ;)

28. 2 noviembre 2008, 18:14Karkayu

    Para Alberto:

    Muy interesante tu respuesta. Tienes (tú o el que haya escrito eso) toda la razón del mundo. Das unos buenos motivos y esta muy bien explicado.

    Y ahora pregunto yo ¿Que solución hay para poder hacer que una maldita pagina se visualice bien en, al menos, IE y Firefox?
    Es muy bonito hacer demagogia sobre “lo bueno y lo malo” y decir “no usar hacks para que Microsoft se de cuenta de que lo hace mal”. Pero señores, SEAMOS REALISTAS. La mayor cuota de mercado la tiene IE. El explorador de Microsoft es EL QUE MAS SE USA (ojo! yo uso firefox desde su version 1.5). Para la gente que nos dedicamos profesionalmente la creación de paginas/aplicaciones web nos da lo mismo lo que tu comentas en tu post, ya que, al cliente (que es el que nos paga) LE DA LO MISMO. Solo quiere que su pagina se vea bien en ambos navegadores. Es más, si me apuras, solo quiere que su pagina se vea bien en IE.

    Como programador ,apoyo y veo buenas tus razones, pero si no hay una solución (porque no la hay por ahora), todo lo que has dicho se queda en NADA.

    Te cuento todo esto porque los que usamos cosas como las que se han contado en este articulo, no tenemos porque ser unos “chapuzas”. Somos gente que intentamos ganarnos un sueldo. Cuando haya una solución viable, no dudes en que yo seré el primero en usarla.

    Saludos.

29. 13 noviembre 2008, 15:54Aiteok

    Estoy capacitandome en CSS con tutoriales, web, foros y manuales.
    Lo que dice Alberto es cierto, hay mejores navegadores que IE… pero… ¿Cómo le hago entender a un cliente esto? de solo mencionarlo, lo pierdo y otra persona le diseña todo con tablas anidadas…
    Este código viene muy bien, pero no es para ayudar a IE, sino para hacernos más fácil la tarea de diseñar con CSS…
    Lo único que no se admite es decir que todos los que usen este código son CHAPUZAS (que no se lo que es)…

    Cuesta mucho hacerle entender a todos los que usan IE que hay otros navegadores que respetan el ESTANDAR, e inclusive son más seguros…

    Esto no lo resolvemos solo los diseñadores, que bastante tenemos que pelear con IE.

    Afortunadamente veo que FIREFOX está ganando más terreno (usuarios hogareños) y la llegada de CHROME también me parece promisoria.

    Evidentemente, Alberto: NO SOS DISEÑADOR ni WEBMASTER.
    Que tengas la razón no quiere decir que el resto esté en contra tuyo.

    Muy buen sitio!
    Y si… Opera ha mejorado mucho, no muerde, pruébenlo…

30. 1 enero 2009, 01:59paulina

    Hola soy nueva en esto mi consula es ¿este código se escribe en el archivo .html o en el .css

31. 31 marzo 2009, 19:55traza

    Buen articulo.
    Para los que diseñan webs, saben que lo minimo es que el diseño se vea bien en IE como en FF, es asi de simple.

32. 31 marzo 2009, 20:38dansandub

    Estoy de acuerdo tanto con lo que dice alberto como lo que dicen los que estan en desacuerdo jeje… es decir, me parece bien no usar los condicionales pero comprendo (como webmaster que soy) que cuando hay que hacer un trabajo y cobrarlo minimamente se tiene que ver bien en los dos navegadores más usados, es decir firefox e IE (lamentablemente por este último). Por otro lado, creo que este juegito de microsoft puede usarse en su contra. Obviamente no lo vamos a hacer en aquellos sitios de nuestros clientes salvo expreso permiso de los mismos, pero sí podemos hacerlo en nuestros sitios personales… y esto consiste en usar estos comentarios para que en IE y SOLO en IE se muestre un cartel que diga algo tipo “Usted está usando un navegador que interfiere con el correcto funcionamiento de este sitio. Para visualizarlo correctamente utilice Firefox. Descárguelo haciendo click aquí“
    De esta forma por lo menos nos sacamos un poquito la bronca que le tenemos a IE por darnos horas de sufrimiento y tal vez entre todos logremos hacerle perder terreno a IE para que algún día no haga falta usar los condicionales ni hacks ni nada por el estilo.

    saludos!

33. 12 abril 2009, 00:58pablo

    yo soy diseñador web y siempre trabajo en firefox porque es comodo y es el mejor segun mi experiencia siempre a dejado tomar elementos de las paginas cosa que los otros no pueden(ni quiero mensionar ese explorador cagado que ni me acuerdo en nombre a si ie ese no vale la pena ni mensionarlo) pero se los recomiendo por ser gratis y cumplir con estetica funcionalidad y seguiridad.
    Gracias firefox

34. 20 julio 2009, 20:56Daniel

    Es muy cierto yo los utilizo y funcionan de maravillas

35. 23 julio 2009, 16:49Miguel

    Cómo se puede hacer esto mismo pero en el Style de un Div? Ejm:
    Style=“position:absolute” (esto para iexplorer)
    Style=“position:relative” (esto para otro navegador)

    Muchas gracias.

36. 27 julio 2009, 22:17dansandub

    Acabo de encontrar esto: no tuve tiempo de investigarlo demasiado, pero parece que puede estar bueno: IE7 aparentemente es una libreria javascript que se llama en el sitio a través de comentarios condicionales y que lo que logra es hacer que IE funcione respetando standares, corrige la falla de png para IE6 y 5, y soluciona varios problemas de CSS. Les dejo el link para que lo vean:
    http://code.google.com/p/ie7-js/

37. 31 julio 2009, 02:23IDCLogic

    El IE7 soluciona mucho de los problemas del IE6 y que eran un dolor de cabeza para los diseñadores, que teníamos que estar adecuando estilos para que funcionen bien en el IE, un explorador que nunca respto las normas del W3C.
    Aún así el Firefox sigue siendo el browser que más se apega a las normas, y creo que la mayoría de diseñadores con experiencia prrueban las web en Firefox antes que en ningún otro browser.
    Aún así como hay mucha gente que tiene el IE 6 y tengo funciones que no son soportadas por este browser uso una función del PHP, por ejemplo:

    <? if (eregi(“MSIE 6.0”,$_SERVER[“HTTP_USER_AGENT”])){ $ie = “MSIE 6.0”; }

    if (eregi(“MSIE 7.0”,$_SERVER[“HTTP_USER_AGENT”])){ $ie = “MSIE 7.0”; }

    if ($ie == “MSIE 6.0”){ ?>

    <div>Acá va la versió para IE 6.0 </div> <? }else{ ?>

    <div>Acá va la versió para IE 7.0 </div>

    Saludos

38. 17 agosto 2009, 09:58メル友

    MR.TELEKURA<a href=“http://majicon.mailonna.net/”>35歳からのメル友</a>～まじコン<a href=“http://firebird.handmadefriends.com/”>出会い</a>ナビ～FireBird<a href=“http://hitozuma-dakara.kirakiradeai.net/”>人妻</a>DAKARA～人妻だから出会いたい<a href=“http://suteki-deai034.info/”>出会い系サイト</a><a href=“http://www.bouquet-toss.com/”>婚活</a><a href=“http://www.ero-tism.com/”>人妻</a><a href=“http://furin.adult-tours.com/”>不倫</a>

39. 23 septiembre 2009, 09:03Alberto

    Efectivamente, 1 año y 18 días después tengo que pedir disculpas por la ofensiva de mis comentarios, cierto es que ese día me encontré un problema por unos divs que no interpretaban correctamente su posición en IE, pero sí en Firefox, Safari, Opera y Chrome, tras media hora buscando como solucionarlo encontré ese comentario original, me sentí tan identificado que tras leerlo no pude remediar mencionar la palabra ‘Chapuza’, aunque eso no me excusa pido disculpas a los Webmaster profesionales, que día tras día se ven obligados a rechazar trabajos o hacerlos de forma ‘penosa’ por que el cliente lo único que quiere ver es una canción sonando y un texto moviéndose y no le cuentes como se hace ni si es código semántico / válido o no…

    También quiero añadir que soy Webmaster desde hace 5 años e informático desde hace 14, y soy de los que se pega con un cliente para que use Linux antes de que funcione con Windows, que compre Intel antes que AMD, de los primeros en usar Chrome OS antes que Windows 7 (Vista lo tuve que usar por motivos de trabajo, duro en mi equipo 8 días, yo me estanco en Windows XP por que MS esta camino de su perdición), siempre he tenido esa lucha por lo mejor, lo eficaz y lo decente, es una dura tarea pero con el tiempo me he demostrado que aunque haya cambiado a 1% de los clientes ha merecido sin duda la pena.

    Para terminar una buena noticia que Youtube, Facebook y empresas como Twitter quieran eliminar Internet Explorer 6, algo es algo…

    Saludos cordiales a todos mis compañeros de la Web.

40. 16 diciembre 2009, 21:25fannyfu

    Es de los mejores sino el mejor post que he encontrado sobre hacks, me ha servido un monton y aun voy en la marcha explicandole a IE como interpretar el css para que se vea como yo quiero. Muchas gracias!

41. 18 enero 2010, 16:14Mina

    Me ha salvado la vida!! bueno, tal vez no tanto xD, pero en verdad es muy útil este tutorial y además esta muy bien explicado con buenos ejemplos prácticos. Gracias!!

---

¡Comenta!

Nombre:

Email:

URL:

Mensaje: