Comentarios Condicionales en Internet Explorer

Cualquiera que diseñe una página web se ha encontrado con las diferencias que existen entre los exploradores, específicamente lo correspondiente a Internet Explorer. Y es que los modos en que se interpretan los códigos en las diferentes versiones de IE pueden hacer que tu página se vea diferente. Con esta guía vamos a aprender a solucionar algunos de estos errores usando los comentarios condicionales.

Los comentarios condicionales son un extensiones agregadas a IE que permiten mostrar (o no) un código dependiendo de la versión en la que se vea la página.

Como trabajan?

Básicamente comienzan con un “<!–[if...]>” seguido del código condicional y cerrado por un “<![endif]–>”

Tienen diferentes formas de usarse, veamos las más comunes.

Si el explorador es Internet Explorer (Todas las versiones mayores que la 5)

1
2
3

<!--[if IE ]>
<p>Lo que se quiere mostrar</p>
<![endif]-->

Si el explorador es una versión de Internet Explorer (En este caso IE 7, pero puede llevar desde la 5 hasta la 7)

1
2
3

<!--[if IE 7]>
<p>Lo que se quiere mostrar</p>
<![endif]-->

Si el explorador es menor que (dependiendo del número de versión que coloques)

1
2
3

<!--[if it IE 7]>
<p>Lo que se quiere mostrar</p>
<![endif]-->

Si el explorador es menor o igual que (dependiendo del número de la versión que coloques)

1
2
3

<!--[if ite IE 6]>
<p>Lo que se quiere mostrar</p>
<![endif]-->

Si el explorador es mayor que (dependiendo del número de la versión que coloques)

1
2
3

<!--[if gt IE 6]>
<p>Lo que se quiere mostrar</p>
<![endif]-->

Si el explorador es mayor o igual que (dependiendo del número de la versión que coloques)

1
2
3

<!--[if gte IE 7]>
<p>Lo que se quiere mostrar</p>
<![endif]-->

Usar el “y” por ejemplo, menor que y mayor que (dependiendo del número de la versión que coloques)

1
2
3

<!--[if (it IE 5)&(gt IE 7)]>
<p>Lo que se quiere mostrar</p>
<![endif]-->

Usar el “o” por ejemplo, Internet Explorer 5 o Internet Explorer 7 (dependiendo del número de la versión que coloques)

1
2
3

<!--[if (IE 5)|(IE 6)]>
<p>Lo que se quiere mostrar</p>
<![endif]-->

Uso común

Me resulta algo ilógico usar estos comentarios para elementos como una imagen o un párrafo pero uno de los usos más comunes es para decirle al explorador que use uno u otro estilo dependiendo de la versión.

1
2
3

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

Cuidado

Lamentablemente NO es posible hacer lo mismo con otros exploradores, por ejemplo algo como lo siguiente:

1
2
3

<!--[if MOZ 3.0]>
<link href="nombre-del-css.css" rel="stylesheet" type="text/css">
<![endif]-->

Eso esta 100% mal, debido a que los Comentarios condicionales son SÓLO PARA INTERNET EXPLORER.

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

• Cambiar color de fondo de web Dinamicamente
• CSS Para principiantes (Capitulo 1)
• Ajustar pagina web a todas las Resoluciones
• Opacidad de imagenes con CSS
• Opciones para el Background (fondo) de tu web

5 Comentarios en "Comentarios Condicionales en Internet Explorer"

1. 

   Isa

   7 Junio 2009

   Respuesta

   Pues a mí donde no se me ven algunas cosas es en firefox u.U

2. 

   maisa

   7 Junio 2009

   Respuesta

   que buen tuto, pero esto sirve para otras versiones de explorer?

3. 

   Mijael166

   7 Junio 2009

   Respuesta

   Buena pregunta maisa….voy a modificar el tuto para hacerme entender un poco mas….y para explicar que es lo que hace este codigo.

4. 

   maisa

   8 Junio 2009

   Respuesta

   ok Mijael ahora quedo mas claro :)

5. 

   Mijael166

   8 Junio 2009

   Respuesta

   Respuesta al Comentario demaisa: Sep….realmente el otro post era demasiado especifico…asi queda un poco mejor explicado todo :D