Recién arrancamos .... y con problemas!
Los Hacks de CSS son artimañas / engaños que se incluyene en el código de una página html 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 para lidiar con las distintas interpretaciones de CSS que tienen los navegadores.
Los hacks CSS surgen porque los navegadores a menudo interpretan de manera distinta el mismo estilo CSS. De ahí que los desarrolladores y diseñadores tengan la necesidad de hacer páginas que se muestren igual independientemente del navegador, teniendo que utilizar códigos y trucos complejos para conseguir que las páginas de un sitio se visualicen de la misma forma en todos ellos.
Lo cierto es que debería haber una sola interpretación del estándar CSS, pero como cada navegador tiene sus normas que escapan a la estandarización , independientemente de lo sugerido por la W3C, las páginas diseñadas no siempre se ven de la misma manera en todos los navegadores.
Los Hacks CSS muchas veces juegan con distintas interpretaciones de 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.
Por ejemplo: Hack CSS de los comentarios de dos barras (//).
Veamos un ejemplo sobre cómo funcionan los Hack CSS, con los comentarios formados por dos barras (//), que no son tratados como tales en Internet Explorer.
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 escribir 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, salvo Internet Explorer que mostrará los H1 con tamaño de 16px y color azul, dado que no tiene en cuenta las dos barras como si fueran comentarios.
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.