Los Hacks de CSS son triquiñuelas para conseguir que una misma declaración de estilos CSS actúe de manera distinta en distintos navegadores. Bajo este concepto se engloban diversas técnicas, muchas veces poco ortodoxas, para lidiar con las distintas interpretaciones de CSS que tienen los distintos navegadores.

Los hacks CSS surgen porque distintos navegadores a menudo interpretan de manera distinta el mismo estilo CSS. Entonces los desarrolladores y diseñadores, que se ven en la necesidad de hacer páginas que se muestren igual independientemente del navegador, tienen que utilizar códigos y trucos complejos para conseguir que la página se visualice de la misma forma en distintos navegadores.

La cuestión es que debería haber una sola interpretación del estándar CSS, pero como cada navegador hace la guerra por su cuenta, al final ocurre que no es así y nos queda a nosotros el problema de hacer que todo cuadre. Es algo a lo que ya estamos acostumbrados con HTML y Javascript, pero que también tenemos que aprender a lidiar con CSS.

Los Hack CSS muchas veces juegan con distintas interpretaciones a errores de sintaxis, cometidos a propósito en el código CSS. Por ello en principio conviene evitarlos o bien es recomendable utilizarlos con cuidado.

Hack CSS de los comentarios de dos barras (//)

En este artículo mostraremos un ejemplo sobre cómo funcionan los Hack CSS, con un típico caso que utiliza los comentarios formados por dos barras (//), que no son tratados como comentarios en Internet Explorer.

Es decir, como hemos visto en otros lenguajes de programación, si una línea de código tiene dos barras al comienzo significa que está comentada y no se tiene en cuenta. En CSS los comentarios se tienen que hacer así:

/* esto es un comentario */

Pero Firefox también interpreta los comentarios formados por //

// esto es un comentario

Internet Explorer simplemente ignora las dos barras y trata la línea como si fuera un código normal.

Por ejemplo tenemos este código:

h1{
   font-size: 12px;
   color: #009900;
   //font-size: 16px;
   //color: #000099;
}

Aquí hemos definido un par de estilos para la etiqueta H1.
Los dos primeros estilos son font-size:12px y color:#009900. Todos los navegadores leerán estos estilos.

Pero luego tiene otros dos estilos, que en realidad son los mismos que los anteriores, que comienzan por dos barras. Firefox y Opera, que interpretan esas dos barras como comentarios, no leerán los estilos. Internet Explorer que no tiene en cuenta las dos barras como comentarios, leerá los dos últimos estilos.

Por lo tanto, el resultado final será que

• Todos los navegadores mostrarán los H1 con tamaño de fuente 12px y color verde.
• Internet Explorer mostrará los H1 con tamaño de 16px y color azul, dado que no tiene en cuenta las dos barras como si fueran comentarios.

Podemos ver el ejemplo en marcha en la URL:
http://www.desarrolloweb.com/articulos/ejemplos/tallercss/css-hack1.html

Tendríamos que verlo con Internet Explorer y con otros navegadores para comprobar que cambian los estilos con los que se muestra el encabezamiento H1.

Conclusión sobre los Hacks CSS

Lo cierto es que los Hacks CSS están ahí y muchas personas los utilizan habitualmente. Hay varios tipos de Hacks, con técnicas más o menos conflictivas u ortodoxas. No debemos abusar de ellos, pero en algunas ocasiones no queda otra solución que utilizarlos para que una página se vea de la misma manera en los navegadores más comunes.

Vimos también un tipo de Hack CSS que sirve para ocultar ciertos estilos en Firefox u otros navegadores y que sólo funcione en Internet Explorer.