6.5.1. Comentarios condicionales
En ocasiones, cuando se diseña un sitio web, es preciso aplicar diferentes reglas y estilos en función del navegador. De esta forma, se pueden corregir los errores y limitaciones de un navegador sin afectar al resto de navegadores.
Microsoft introdujo en su navegador Internet Explorer 5 un mecanismo llamado "comentarios condicionales", que todavía incluyen las versiones más recientes como Internet Explorer 8, y que permite aplicar diferentes estilos CSS según la versión del navegador.
La sintaxis de los comentarios condicionales se basa en la de los comentarios normales de HTML:
<!-- Comentario normal de HTML --> <!--[if expresion]> Comentario condicional <![endif]-->
La sintaxis de los comentarios condicionales permite que su contenido se ignore en cualquier navegador que no sea de la familia Internet Explorer.
Las expresiones se crean combinando identificadores, operadores y valores. El único identificador definido es IE, que permite crear el comentario condicional más simple:
<!--[if IE]> Este navegador es cualquier versión de Internet Explorer <![endif]-->
El operador más sencillo definido por los comentarios condicionales es el operador de negación (!), que se indica delante de una expresión para obtener el resultado contrario:
<!--[if !IE]><!--> Este navegador es cualquiera salvo Internet Explorer <!--<![endif]-->
Si se quiere restringir el alcance del comentario condicional a una única versión de Internet Explorer, se puede indicar directamente el número de la versión:
<!--[if IE 5.5]> Este navegador es Internet Explorer 5.5 <![endif]--> <!--[if IE 6]> Este navegador es Internet Explorer 6 <![endif]--> <!--[if IE 8]> Este navegador es Internet Explorer 8 <![endif]-->
Además de las versiones específicas, también es posible restringir los comentarios condicionales a un grupo de versiones de Internet Explorer mediante los operadores "menor que" (lt), "mayor que" (gt), "menor o igual que" (lte), "mayor o igual que" (gte).
<!--[if lt IE 7]> Este navegador es cualquier versión anterior a Internet Explorer 7 <![endif]--> <!--[if lte IE 6]> Este navegador es Internet Explorer 6 o cualquier versión anterior <![endif]--> <!--[if gt IE 7]> Este navegador es cualquier versión más reciente que Internet Explorer 7 <![endif]--> <!--[if gte IE 8]> Este navegador es Internet Explorer 8 o cualquier versión más reciente <![endif]-->
Por último, también se pueden utilizar otros operadores más complejos similares a los que se pueden encontrar en los lenguajes de programación. El operador AND (&) combina dos expresiones para crear una condición que sólo se cumple si se cumplen las dos expresiones. El operador OR (|) también combina dos expresiones y crea condiciones que se cumplen cuando al menos una de las dos expresiones se cumple. También se pueden utilizar paréntesis para crear expresiones avanzadas:
<!--[if !(IE 7)]> Este navegador es cualquier versión diferente a Internet Explorer 7 <![endif]--> <!--[if (IE 7) | (IE 8)]> Este navegador es Internet Explorer 7 o Internet Explorer 8 <![endif]--> <!--[if (gt IE 5) & !(IE 8)]> Este navegador es cualquier versión más reciente que Internet Explorer 5 pero que no sea Internet Explorer 8 <![endif]--> <!--[if (gte IE 5) & (lt IE 8)]> Este navegador es Internet Explorer 5 o cualquier versión más reciente que sea anterior a Internet Explorer 8 <![endif]-->
Las principales ventajas de los comentarios condicionales son:
- Compatibilidad con cualquier navegador, ya que el resto de navegadores consideran que los comentarios condicionales son comentarios normales de HTML e ignoran su contenido.
- No requiere el uso de lenguajes de programación como JavaScript, aunque se puede combinar con este tipo de técnicas para detectar dinámicamente el tipo y versión de navegador.
Nota Basándose en la idea de los comentarios condicionales, se ha desarrollado una técnica que permite crear hojas de estilos condicionales que aplican diferentes propiedades en función de la versión del navegador. Esta técnica se denomina Conditional CSS y requiere procesar las hojas de estilos en el servidor antes de servirlas a los usuarios. Los lenguajes de programación de servidor soportados son PHP, C y C++.
6.5.2. Filtros y hacks
Los filtros y hacks es otra de las técnicas disponibles para aplicar diferentes estilos y reglas CSS en función del navegador que visualiza los contenidos. Al contrario que los comentarios condicionales, los filtros y hacks constituyen una forma poco elegante y técnica de solucionar este problema.
La idea de los filtros y hacks consiste en aprovechar los errores y carencias de los navegadores para ocultar los estilos CSS que no se deben aplicar en ese navegador. El siguiente ejemplo muestra uno de los hacks más antiguos y conocidos que aprovecha un error en las versiones obsoletas de Internet Explorer:
#elemento {
width: 300px;
voice-family: "\"}\"";
voice-family: inherit;
width: 250px;
}
html > body #elemento {
width: 300px;
}Internet Explorer 5 y 5.5 no interpretan correctamente el modelo de cajas de CSS, por lo que no muestran los elementos con la misma anchura que el resto de navegadores. Si se quiere realizar un diseño con el mismo aspecto en cualquier navegador, es preciso utilizar propiedades diferentes para Internet Explorer 5/5.5 y el resto de navegadores.
Entre los muchos errores de Internet Explorer 5/5.5 se encuentra la imposibilidad de procesar correctamente la declaración voice-family: "\"}\"";. Por tanto, las reglas CSS anteriores se interpretan de la siguiente forma en cada navegador:
/* Internet Explorer 5/5.5 */
#elemento {
width: 300px;
}
/* Internet Explorer 6 */
#elemento {
width: 300px;
width: 250px;
}
/* Resto de navegadores */
#elemento {
width: 300px;
width: 250px;
}
html > body #elemento {
width: 250px;
}El resultado final del hack anterior es que Internet Explorer 5/5.5 aplica un valor de 300px a la propiedad width y el resto de navegadores aplican un valor de 250px. Si se tienen en cuenta los márgenes, bordes y rellenos, el elemento se muestra con el mismo aspecto en cualquier navegador.
Algunos filtros y hacks son mucho más sencillos que el mostrado anteriormente. De hecho, existen tres filtros muy simples que se utilizan para aplicar diferentes estilos a cada versión de Internet Explorer. El primer filtro es * html, que aplica las reglas CSS a las versiones de Internet Explorer anteriores a la 7:
p {
color: red;
}
* html p {
color: blue;
}Si se añade * html delante del selector de cualquier regla CSS, esa regla sólo se aplica a los navegadores de la familia Internet Explorer anteriores a la versión 7. De esta forma, en el ejemplo anterior los párrafos de la página se muestran de color azul en los navegadores Internet Explorer 5, 5.5 y 6, mientras que se muestran de color rojo en el resto de navegadores.
Otro de los hacks más utilizados es _ (guión bajo) que hace que una propiedad sólo se aplique a los navegadores de la familia Internet Explorer anteriores a la versión 7:
p {
color: red;
_color: blue;
}La regla CSS anterior muestra los párrafos de la página de color rojo en cualquier navegador salvo en los navegadores Internet Explorer 5, 5.5 y 6, donde se muestran de color azul.
Por último, también existe el hack * (asterisco) que hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 8:
p {
color: red;
*color: blue;
}En el ejemplo anterior, los párrafos de la página se muestran de color azul en cualquier navegador de la familia Internet Explorer cuya versión sea anterior a la 8 y se muestran de color rojo en cualquier otro navegador.
En este artículo puedes encontrar otra serie de filtros y hacks aplicables a todas las versiones antiguas de Internet Explorer.
El uso de los filtros y hacks siempre debe considerarse como el último recurso para conseguir que los diseños tengan el mismo aspecto en cualquier navegador. Como los filtros y hacks se basan en aprovechar errores de los navegadores, su principal problema es que no garantizan su funcionamiento con las versiones más modernas de los navegadores. Además, los filtros y hacks complican el código CSS y lo hacen más difícil de leer y de mantener.
La mejor alternativa a los filtros y hacks es el uso de comentarios condicionales. Si no es posible el uso de comentarios condicionales, es preferible que el diseño de la página muestre ligeras diferencias visuales en cada navegador.
Afortunadamente, la importancia de los filtros y hacks es cada vez menor, ya que todos los navegadores modernos solucionan los graves errores de sus versiones anteriores e introducen menos errores nuevos.