Servicios de Diseño Web Freelance de LaWebera.es

Hack CSS para Internet Explorer 7

Particularmente soy bastante reacio a utilizar hacks CSS en mis diseños, principalmente porque me gusta que validen, aunque como sabemos que no lo haga no cambia en nada el aspecto visual en el navegador. Sin embargo, creo que es bueno conocerlos por si en algún momento sea necesario utilizarlos.

Con la última versión de Internet Explorer, es decir, la 7,los diseñadores tenemos un nuevo problema ya que no todo se ve igual en Firefox que en IE6, por lo que a veces es necesario realizar modificaciones sólo para este navegador. Un hak conocido es el de colocar un asterisco delante de la propiedad CSS y así sólo será reconocida por Internet Explorer 6 y 7. Algo así:

body {  background: #fff;
/* Todos los navegadores */
*background: #000;
/* IE6 e IE7 */  }

Es decir, en Firefox, Opera y los demás navegadores el fondo será blanco, pero en Internet Explorer 6 y 7 el fondo será negro, ya que lee la propiedad con el asterisco, cosa que los demás navegadores pasan por alto. Es importante la ubicación, es decir, la propiedad con el asterisco debajo de la normal (respetando la cascada).

Otra opción que se utiliza para dar diferentes estilos a navegadores es el uso de !important lo cual es aceptado por Firefox, IE7 y los demás navegadores, pero no por IE6. Por lo que se utiliza cuando no queremos dar cierta propiedad a IE6. Lo bueno de esto es que si valida y así se usa:

body {  background: #fff !important;
/* Firefox, IE7 y los demás */
background: #000;
/* IE6 y anteriores */  }

Firefox, IE7, Opera, Safari y los demás tendrán fondo blanco, pero IE6 tendrá fondo negro. Ahora para crear un hack exclusivo para IE7 combinamos estas dos técnicas que hemos repasado. Es decir, agregando un asterisco e !important a la propiedad. Lo hacemos de la siguiente manera:

body {  background: #fff !important;
/* Firefox y los demás */
*background: #000 !important;
/* Sólo IE7 */
*background: #ccc;
/* Sólo IE6 */  }

De esta forma podremos lograr 3 estilos direfentes dependiendo el navegador que estemos usando, es decir, en el primer caso, Firefox y los demás navegadores tendrán fondo blanco, Internet Explorer 7 fondo negro e Internet Explorer 6 fondo gris.

Artículos Relacionados
Desarrolla para Firefox, hackea para Explorer
Desde que baso mi trabajo en los Estándares Web CSS, HTML y Javascript, he...
Dreamweaver. Propiedades de la página web
Utilice el cuadro de diálogo Propiedades de la página de Dreamweaver para especificar diversas opciones...
Los 10 principales errores del diseño web
Jakob Nielsen, gurú de la usabilidad en las páginas webs, publica un interesante artículo...
7 Consejos para diseñar tu web de forma eficaz
Aquí te presento algunos consejos básicos a seguir a la hora de diseñar una...

Última Actualización: 14/12/09