imagen 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:
- 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).
- 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.
Etiquetas:
Comentarios
deja un comentario
Deja un comentario