Hacks CSS

  • Por
Comentamos lo que son los Hacks CSS y damos un ejemplo de Hack CSS sencillo de aplicar y muy práctico.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

zacarias

04/3/2008
Seria bueno saber si esta pequeña "triquiñuela" funciona de la misma manera en safari, que actualmente es el browser mas popular en mac. ya que por lo general el uso del navegador esta ligado al sistema operativo.

Alejandro

05/3/2008
En respuesta al comentario anterior, decir que para comprobar si en SAFARI funciona, solo es necesario descargarlo y comprobar.
Lo hice y decir que en SAFARI se ve verde, como en Mozilla.
Otro método de hacerlo pa IE es:
/* IE6 Only */
* html #capa{}

/* IE7 Only */
*:first-child+html #capa{}

Donde pone capa puede ser clase o etiqueta o cualquier declaración css.
Esta declaración va dentro del archivo css.
Lo que hace es que coje la declaración de #capa genérica y si es IE incluye las declaraciones específicas.


Otra forma más:
-----------------------------------------------
<link href="css/estilo.css" rel="stylesheet" type="text/css" media="all">
<!--[IF IE]>
<link href="css/IEestilo.css" rel="stylesheet" type="text/css" media="all">
<![Y aqui el endif]-->
-------------------------------------------------
De esta forma, si es IExplorer coje su css y si no lo es coje el otro css. Se puede hacer con distintas versiones de IE así: IF IE7
Para usar esta forma yo uso un archivo comun.css que es llamado desde ambos css con @import y en cada uno de los otros archivos solo va el especifico de navegador.


Más sobre condicionales:
http://msdn2.microsoft.com/en-us/library/ms537512.aspx

nacho

25/1/2009
hola tengo un problema de vision con el blogs en explorer y no consigo que el general reduzca como en firefox en explorer me sale mas grande mi css es
}
.general {
margin : 0 auto 0 auto;
width : 790px;
}
* html #general {
margin-left:200px;
padding:100px;
width : 790px;
}
he conseguido moverlo a la derecha pero el tamaño no responde prodian decirme cual es el problema o darme una ideo porque creo que es box model pero
no lo consigo y sin preguntar no se aprende.