martes, 8 de febrero de 2011

Comentarios condicionales (HTML)

Los comentarios condicionales solo funcionan en Internet Explorer bajo el sistema operativo Windows, y por lo tanto son excelentes para dar instrucciones especiales dirigidas solo a Internet Explorer en Windows. Son soportados desde Internet Explorer 5 en adelante, incluso es posible distinguir entre la versión 5.0, 5.5, 6.0, 7.0 y 8.0.


Los comentarios condicionales funcionan de la siguiente manera:

------------------------------------------------------------------------------------
<!--[if IE 6]>
Aquí van instrucciones especiales para IE6.
<![endif]-->
------------------------------------------------------------------------------------
 
Su estructura base es igual que la de los comentarios HTML (<!– –>). Por lo tanto los demas navegadores lo veran como comentarios normales y seran ignorados sin ejecutar ninguna acción especial.

Internet Explorer, sin embargo, ah sido programado para reconocer la sintaxis especial <!–[if IE]>, resuelve el if y analiza el contenido de los comentarios condicionales como si fuera contenido normal de la página.

Ya que los comentarios condicionales usan la estructura de los comentarios HTML, solo pueden ser incluidos en archivos HTML, y no en archivos CSS. También puedes utilizar la etiqueta <link> en los comentarios condicionales para hacer referencia a una hoja de estilos ó un archivo JavaScript.

Ejemplo

A continuación he añadido un monton de comentarios condicionales que imprimen un mensaje de acuerdo a la versión de Internet Explorer.

Nota: si usas multiples Explorers en una computadora, los comentarios condicionales se interpretarán como la ultima versión de Internet Explorer que tengas disponible en tu computadora (si tienes la version 6.0, 7.0 y 8.0, la versión que interpretará los comentarios condicionales sera la 8.0).

--------------------------------------------------------------------------------------------------------------------------------------------------
<!--[if IE]>
De acuerdo con este comentario condicional tu explorador es 
Internet Explorer
<![endif]-->
 
<!--[if IE 6]>
De acuerdo con este comentario condicional tu explorador es 
Internet Explorer 6
<![endif]-->
 
<!--[if IE 7]>
De acuerdo con este comentario condicional tu explorador es 
Internet Explorer 7
<![endif]-->
 
<!--[if gte IE 6]>
De acuerdo con este comentario condicional tu explorador es mayor ó igual a 
Internet Explorer 6.
<![endif]-->
 
<!--[if lt IE 6]>
De acuerdo con este comentario condicional tu explorador es menor a 
Internet Explorer 6
<![endif]-->
 
<!--[if lte IE 6]>
De acuerdo con este comentario condicional tu explorador es igual ó menor a 
Internet Explorer 6
<![endif]-->
 
<!--[if gt IE 6]>
De acuerdo con este comentario condicional tu explorador es mayor a 
Internet Explorer 6
<![endif]-->
 
--------------------------------------------------------------------------------------------------------------------------------------------------
Ojo en las sintaxis especiales
  • gt: greater than (mayor a:)
  • lte: less than or equal to (menor o igual a:)

¿Es un hack de CSS?

Estrictamente hablando, si, ya que sirven para dar instrucciones especiales solo en algunos exploradores. Sin embargo, no dependen de un error del navegador para resolver otro, como lo hacen los verdaderos hacks de CSS. Ademas no solamente pueden ser usados como un hack de CSS, si no también para incluir ciertos archivos JavaScript dependiendo de la versión de Internet Explorer (aunque rara vez pasa).

Usa los comentarios condicionales con moderación. Primero busca si puedes encontrar una solución real de CSS a un problema de Internet Explorer. En caso de no encontrarla, no dudes en usarlos.

Fuente: http://gomflo.com/2010/03/30/comentarios-condicionales-html/