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.

Campos checkboxes y radios

Los pequeños cuadros y círculos que todos hacemos clic para indicar decisiones importantes en nuestra vida de internet. Cuando rellenas un determinado formulario que tiene alguno de estos campos hay veces que puedes dar clic en cualquier parte del texto describiendo el elemento. Sin embargo otras veces, no es el caso, y tienes tienes que dar el clic en el pequeño circulo o cuadro del campo para indicar tu elección. Para los usuarios experimentados esto se vuelve una molestia, el punto de la web y que todos deseamos es que sea facilmente accesible para cualquiera. Los formularios toman mucho tiempo de rellenar y nadie desea poner toda esa información. Lo ultimo que deseamos es hacerlo complicado.

La etiqueta label

Entonces aquí esta la solución para todo lo anterior. Bueno es extremadamente simple, necesitas agregar una nueva etiqueta a tu arsenal: label. En términos simples la etiqueta label indica en el html que texto acompaña que campo de la forma.

Ejemplo con un checkbox y la etiqueta label:

<input type="checkbox" id="recordarme" name="recordarme" />
<label for="recordarme">Recordarme en esta computadora</label>

Ejemplo con un checkbox sin la etiqueta label:

<input type="checkbox" id="recordarme" name="recordarme" />
Recordarme en esta computadora

¿Notan la diferencia?. En el primer ejemplo podemos dar clic sobre el texto que esta alrededor y marca ó desmarca el checkbox automaticamente, en el segundo ejemplo es necesario dar clic especificamente en el cuadro del checkbox.

Ejemplo con botones de radio

<input type="radio" name="valor_idea" id="buena" />
<label for="buena">Buena idea</label>
 
<input type="radio" name="valor_idea" id="mala" />
<label for="mala">Mala idea</label>

No solo para checkboxes y radios

Todo lo anterior no quiere decir que la etiqueta label es solo para checkboxes y botones radio. También puede ser usado en la campos input (text, radio, checkbox), select, y textarea.

Ahora que entiendes el verdadero uso de la etiqueta label deberias empezar a utilizarla. Crear formas accesibles es el elemento clave para desarrollar de acuerdo con los estándares web.