Los diferentes navegadores y las diferentes versiones de cada navegador incluyen defectos y carencias en su implementación del estándar CSS 2.1. Algunos navegadores no soportan ciertas propiedades, otros las soportan a medias y otros ignoran el estándar e incorporan su propio comportamiento.
De esta forma, diseñar una página compleja que presente un aspecto homogéneo en varios navegadores y varias versiones diferentes de cada navegador es una tarea que requiere mucho esfuerzo. Para facilitar la creación de hojas de estilos homogéneas, se han introducido los filtros y los hacks.
A pesar de que utilizar filtros y hacks es una solución poco ortodoxa, en ocasiones es la única forma de conseguir que una página web muestre un aspecto idéntico en cualquier navegador.
En primer lugar, los filtros permiten definir u ocultar ciertas reglas CSS para algunos navegadores específicos. Los filtros se definen aprovechando los errores de algunos navegadores (sobre todo los antiguos) a la hora de procesar las hojas de estilos.
Un caso especial de filtro son los comentarios condicionales, que es un mecanismo propietario del navegador Internet Explorer. Los comentarios condicionales permiten incluir hojas de estilos o definir reglas CSS específicamente para una versión de Internet Explorer.
El siguiente ejemplo carga la hoja de estilos basico_ie.css solamente para los navegadores de tipo Internet Explorer:
<!--[if IE]>
<style type="text/css">
@import ("basico_ie.css");
</style>
<![endif]-->Los navegadores que no son Internet Explorer ignoran las reglas CSS anteriores ya que interpretan el código anterior como un comentario de HTML (gracias a los caracteres <!-- y -->) mientras que los navegadores de la familia Internet Explorer lo interpretan como una instrucción propia y válida.
El filtro [if IE] indica que esos estilos CSS sólo deben tenerse en cuenta si el navegador es cualquier versión de Internet Explorer. Utilizando comentarios condicionales, también es posible incluir reglas CSS para versiones específicas de Internet Explorer:
<!--[if gte IE 6]>
<style type="text/css">
@import ("basico_ie6.css");
</style>
<![endif]-->El anterior ejemplo solamente carga la hoja de estilos basico_ie6.css si el navegador es la versión 6 o superior de Internet Explorer, ya que gte se interpreta como "greater than or equal" ("igual o mayor que"). Otros valores disponibles son gt ("greater than" o "mayor que"), lt ("less than" o "menor que") y lte ("less than or equal" o "igual o menor que").
<!--[if gt IE 7]> Mayor que Internet Explorer 7 <![endif]--> <!--[if gte IE 7]> Mayor o igual que Internet Explorer 7 <![endif]--> <!--[if lt IE 8]> Menor que Internet Explorer 8 <![endif]--> <!--[if lte IE 7]> Igual o menor que Internet Explorer 7 <![endif]-->
Una de las mejores listas actualizadas con todos los filtros disponibles para los navegadores de los diferentes sistemas operativos se puede encontrar en http://centricle.com/ref/css/filters/
Por otra parte, los hacks permiten forzar el comportamiento de un navegador para que se comporte tal y como se espera. Se trata de una forma poco elegante de crear las hojas de estilos y los hacks se pueden considerar pequeños parches y chapuzas que permiten que la hoja de estilos completa se muestre tal y como se espera.
Uno de los hacks más conocidos y utilizados es el llamado * html. Todas las propiedades CSS que se establezcan mediante el selector * html son interpretadas exclusivamente por el navegador Internet Explorer 6 y sus versiones anteriores:
div {
border-bottom: 1px dotted #000;
}
* html div {
border-bottom: 1px solid #000;
}El ejemplo anterior utiliza el hack * html para mostrar un borde inferior punteado en los <div> en todos los navegadores salvo Internet Explorer 6. Como en este navegador no se muestran correctamente los bordes punteados de 1 píxel de anchura, se decide mostrar un borde formado por una línea continua.
El otro hack más conocido y utilizado por su sencillez es el "underscore hack". Las propiedades cuyos nombres se indiquen con un guión bajo por delante, sólo son interpretadas por el navegador Internet Explorer 6 y sus versiones anteriores:
#menu {
position: fixed;
_position: static;
}Los navegadores más modernos soportan el valor fixed para la propiedad position, pero Internet Explorer 6 no la soporta. Por este motivo, la regla CSS anterior establece el valor de la propiedad position y seguidamente define la propiedad _position.
Los navegadores que siguen los estándares rechazan la propiedad _position, ya que su nombre no se corresponde con ninguna propiedad válida de CSS. Internet Explorer 6 y las versiones anteriores, consideran correcta tanto position como _position, por lo que el valor utilizado será el que se haya definido en último lugar (static en este caso).
Una de las mejores listas actualizadas con los hacks más útiles para varios navegadores de diferentes sistemas operativos se puede encontrar en: http://css-discuss.incutio.com/?page=CssHack