Internet Explorer y sus comentarios condicionales

Según Microsoft:

Los comentarios condicionales facilitan a los desarrolladores el tomar ventaja de las características ofrecidas por Internet Explorer 5 y versiones posteriores, mientras que las páginas degradaran en navegadores menos modernos... ¿?

Eso es lo que dice Microsoft, para mi la verdad es que:

Los comentarios condicionales sólo nos sirven para evitar que las anticuadas y casi obsoletas versiones de Internet Explorer rompan nuestros diseños.

¿Por que si quiero cambiar la web estoy hablando de eso?

Por dos sencillas razones:

1. Cualquier diseñador web debe saber cómo usar estos comentarios condicionales para evitar que sus diseños se vean terribles (y poder seguir cobrándole a sus clientes).
2. Estamos usando comentarios condicionales en la campaña: ¿Quieres cambiar la web o prefieres seguir diseñando para IE6?. Me encanta la ironía, tomar ventaja de las (limitadas) capacidades de Internet Explorer para decir que es un navegador obsoleto. Y podremos hacer lo mismo cuando le llegue el turno a Internet Explorer 7.

La sintaxis de los comentarios condicionales

Lo mejor es empezar con un ejemplo:

<!--[if gte IE 6]>
<p>Usando comentarios condicionales</p>
<![endif]-->

Aquí ves que el <p> está encerrado en comentarios condicionales, esa es la idea básica, lo interesante es lo que está dentro del <--[if gte IE 6]>.

Justamente eso es lo que se usa para definir qué versión o versiones de IE mostrarán lo que esté encerrado en el >comentario condicional.

Un poco más sobre al sintaxis

Lo que se encierra entre corchetes [ ] indica que versiones de IE lo mostrarán.

Aquí una tabla de todas las opciones:

Operador	Ejemplo	Descripción
IE	[if IE]	La única cadena de texto soportada es IE, que corresponde a Internet Explorer
valor	[if IE 7]	El valor de la versión específica de IE
!	[if !IE]	El valor NOT, invierte el significado lógico de la expresión
lt	[if lt IE 7]	Menor que
lte	[if lte IE 6]	Menor o igual que
gt	[if gt IE 6]	Mayor que
gte	[if gte IE 7]	Mayor o igual que
( )	[if !(IE 7)]	Marca una sub expresión, usado en conjunto con otros operadores lógicos para crear expresiones más complejas.
&	[if (gt IE 5)&(lt IE 7)]	Operador lógico AND
|	[if (IE 6)|(IE 7)]	Operador lógico OR

Microsoft nos da todos esos operadores, en la práctica el más usado es uno solo:

<!--[if lte IE 6]>
<p>El más usado es lte IE 6 </p>
<![endif]-->

Que apunta a Internet Explorer 6 y versiones inferiores.

2 cosas que puedes hacer con los operadores condicionales

La primera es darle una hoja de estilos específica a Internet Explorer 6 e inferiores, así te evitas tener que usar hacks, por ejemplo, puedes crear la hoja de estilos como-odio-a-ie6.css con todas las modificaciones necesarias, y luego, al momento de llamarla en el HTML pondría algo así:

<!--[if lte IE 6]>
    <link rel="stylesheet" href="como-odio-a-ie6.css" type="text/css" />
  <![endif]-->

Con esto no ensuciaras tu hoja de estilos con esos hacks que tanto odiamos :)

La segunda cosa que puedes hacer es usarlos para decirle a la gente que IE6 es cosa del pasado, dale una mirada a la campaña.

Comentarios

deja un comentario