1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Comentarios condicionales en Internet Explorerimagen de Erunion

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:

OperadorEjemploDescripció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.

Etiquetas:

Comentarios

deja un comentario

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910