INTRODUCCIÓN

Uno de los principales problemas al desarrollar una página y/o sitio Web

es lograr que el diseño sea compatible con todos los navegadores, es decir, que

pueda verse igual (o lo más similar posible) en todos ellos.

El problema radica en la manera que los navegadores interpretan el

código HTML y CSS, ya que en algunos navegadores no son soportadas ciertas

propiedades, otros las soportan a medias y otros ignoran el estándar

incorporando su propio comportamiento.

Por lo tanto, para que el diseño Web sea homogéneo en todos los

navegadores y sus diferentes versiones, es necesario hacer uso de filtros y

hacks que facilitan la creación de hojas de estilos homogéneas.

Los filtros y hacks se basan en el aprovechamiento de los errores y

carencias de los navegadores para encubrir los estilos CSS que no se deben

aplicar en ese navegador, siendo una forma poco estética y técnica de

solucionar este problema, ya que no garantizan su funcionamiento con las

versiones más modernas de los navegadores. Asimismo, los filtros y hacks

hacen más difícil de leer y de mantener el código CSS.

Por consiguiente, el uso de los filtros y hacks siempre se debe considerar

como un último recurso para lograr que los diseños tengan igual aspecto en

cualquier navegador.
 2

HACKS Y FILTROS

Inicialmente, se considera conveniente que para poder entender que son

los hacks y filtros en CSS, es necesario explicar el concepto de Hojas de Estilo

en Cascada (CSS, Cascading Style Sheets). Según el W3C (Consorcio World

Wide Web), las define como “un mecanismo para dar estilo a documentos

HTML y XML, que consiste en reglas simples a través de las cuales se

establece cómo se va a mostrar un documento en la pantalla, o cómo se va a

imprimir, o incluso cómo va a ser pronunciada la información presente en ese

documento a través de un dispositivo de lectura”. En otras palabras, se entiende

que una hoja de estilo es un mecanismo que permite a los desarrolladores tener

control sobre el estilo y formato de los documentos Web, como por ejemplo, los

formatos de las fuentes, colores, espaciado, entre otras propiedades.

En otro sentido, uno de las principales complicaciones para los

desarrolladores Web es crear diseños que sean homogéneos en todos los

navegadores. Por ello, para eliminar los errores de los navegadores, que

afectan al diseño de manera o menos patente, es necesario hacer uso de

“trucos” como los filtros y hacks.

Filtros CSS

Un filtro es una técnica que permite al desarrollador Web definir u ocultar

ciertas reglas CSS para algunos navegadores específicos. Los filtros se definen
 3
aprovechando los errores de algunos navegadores (principalmente los antiguos)

en el momento de procesar las hojas de estilos.

Tal como lo describe Javier Eguíluz Pérez, en su libro “Introducción a

CSS” existe un caso especial de filtro llamado comentarios condicionales, que

son un mecanismo propietario del navegador Internet Explorer, que permiten

incluir hojas de estilos o definir reglas CSS específicamente para una versión de

Internet Explorer.

El autor muestra el siguiente código que 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]-->

Como se puede apreciar, gracias a los caracteres <!-- y --> los

navegadores que no son Internet Explorer ignoran las reglas CSS anteriores ya

que interpretan el código anterior como un comentario de HTML, mientras que

las diferentes versiones de Internet Explorer lo interpretan como una instrucción

propia y válida. Además 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. Cuando lo que se pretende es incluir reglas, utilizando comentarios

 4
condicionales, para versiones específicas de Internet Explorer, se redacta el

código de la siguiente manera:

<!--[if gte IE 6]>

<style type="text/css">

@import ("basico_ie6.css");

</style>

<![endif]-->

Del código anterior, podemos observar que solamente se carga la hoja

de estilos basico_ie6.css si el navegador es Internet Explorer versión 6 o

superior, 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").

Hacks CSS

Un hack, en el ámbito de desarrollo web, es un “truco” o un pequeño

parche que permite esconder o mostrar propiedades CSS dependiendo del

navegador, la versión del navegador o capacidad.

Los hacks CSS suelen utilizarse para obtener una mayor compatibilidad

de una página web en los distintos navegadores. En otras palabras, los hacks

permiten forzar el comportamiento de un navegador para que su

comportamiento sea el esperado.

 5
Eguíluz, (2009) menciona que el hack más conocido y utilizado es el

llamado * html. Mediante el selector * html todas las propiedades CSS que

se establezcan serán interpretadas exclusivamente por el navegador Internet

Explorer 6 y sus versiones anteriores.

Un ejemplo de la utilización del selector * html es el que se muestra a

continuación:

div {

border-bottom: 1px dotted #99994D;

* html div {

border-bottom: 1px solid #99994D;

Del código anterior, se puede observar que se utiliza un hack * html para

mostrar un borde inferior punteado (border-bottom: 1px dotted

#99994D;)en los <div> en todos los navegadores excepto en Internet

Explorer 6, en el cual no se muestran correctamente los bordes punteados de 1

píxel de anchura, por lo que es mejor mostrar un borde formado por una línea

continua (border-bottom: 1px solid #99994D;).

Por otro lado, Schulz, (2009) describe que por regla general los hacks

son problemáticos por las siguientes razones:

 Crean redundancia al asignar diferentes valores a una misma propiedad.

 6
 Al ser reparado el error en el navegador, el hacks puede provocar

nuevos errores.

 En determinadas circunstancias, demasiados hacks en una misma hoja

de estilo pueden impedir una correcta validación.

 Cada hack adapta la sintaxis CSS mediante instrucciones y reglas

crípticas.

 Un hack se dirige a un navegador concreto en un conjunto de

instrucciones pensadas para todos los navegadores.

Por último, cabe hacer mención que no existe regla válida que establezca

cuando utilizar filtros y hacks. Sin embargo, Schulz, (2009) señala que los hacks

se deben emplear cuando no se tenga otro remedio o cuando se vaya aplicar el

hack contra un navegador que nunca más se va a fabricar (por ejemplo, NN 4 o

IE 5 Mac). En adición, el uso de técnicas para dar soporte a los navegadores,

depende del esfuerzo del desarrollador para conseguir una representación

visualmente “exacta” en toda la gama de navegadores.

 7
CONCLUSIONES

En relación a lo consultado en diferentes fuentes de información, se

puede concluir que para solucionar problemas relacionados con la apariencia

homogénea de páginas y sitios web es preciso utilizar filtros y hacks, los cuales

facilitan la creación de hojas de estilo, ya que cada navegador y sus diferentes

versiones tienen defectos y carencias en la implementación del estándar CSS.

El aprovechamiento de los errores y carencias de los navegadores, para

encubrir los estilos CSS, es mediante lo cual se basa el uso de los filtros y

hacks. Por tal razón es una manera muy poco estética y técnica de solucionar

los problemas de incompatibilidad, ya que no garantizan su funcionamiento con

las versiones más modernas de los navegadores, además que hacen más difícil

de leer y de mantener el código CSS.

De lo anterior expuesto, se puede deducir que el uso de los filtros y de

los hacks solo debe considerarse como un último recurso para lograr que los

diseños tengan igual aspecto en cualquier navegador.

Por otro lado, una mejor alternativa al uso de los filtros y hacks es la

utilización de comentarios condicionales, que es un mecanismo que permite

aplicar diferentes estilos CSS según la versión del navegador. Pero 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.

Favorablemente, cada vez es menor el uso de los filtros y hacks, ya que

todos los navegadores modernos solucionan los graves errores de sus

versiones anteriores e introducen menos errores nuevos.

 8
FUENTES DE CONSULTA

1. Eguíluz Pérez, J. (18 de Junio de 2009). Recuperado el 9 de Abril de 2011,

de Sitio Web LibrosWeb.es:

http://www.librosweb.es/css_avanzado/capitulo6/comentarios_condicionales

_filtros_y_hacks.html

2. Eguíluz Pérez, J. (19 de Mayo de 2009). Recuperado el 10 de Abril de 2011,

de Sitio Web LibrosWeb.es:

http://www.librosweb.es/css/capitulo13/hacks_y_filtros.html

3. Schulz, R. (2009). Diseño Web con CSS (Primera ed.). México: Alfaomega.

4. W3C. (10 de Enero de 2008). World Wide Web Consortium (W3C), Oficina

Española. Recuperado el 10 de Abril de 2011, de Sitio Web de la Oficina del

W3C en España: http://www.w3c.es/glosarioj

5. W3C. (16 de Diciembre de 2008). World Wide Web Consortium (W3C),

Oficina Española. Recuperado el 9 de Abril de 2011, de Sitio Web de la

Oficina del W3C en España: http://www.w3c.es/Divulgacion/a-z/#w