Hack CSS !important para Internet Explorer 6

  • Por
Hack CSS para cargar estilos diferentes cuando el visitante tiene Internet Explorer 6, a través de la regla important de CSS.
En este Taller de CSS vamos a explicar un hack que nos puede ayudar a cargar estilos distintos para los usuarios que acceden a nuestra página con el navegador Internet Explorer 6, basado en el uso de la directriz !important de las Hojas de Estilo en Cascada.

A estas alturas del panorama de navegadores actual quizás resulta hasta pesado hablar de Internet Explorer 6, cuando a la mayoría de nosotros le gustaría perderlo de vista y no gastar ni un minuto más arreglando la web para que se vea bien en ese antiguo browser. Pero nos guste o no, todavía hay un porcentaje representativo de usuarios que navegan con Internet Explorer 6 y quizás tengamos que hacer algún tratamiento.

Nota: En DesarrolloWeb.com hace tiempo que no trabajamos para que la web se vea bien en Internet Explorer 6. Lo cierto es que estamos un poco cansados de ese navegador donde las cosas funcionan tan mal. Pensamos que nuestros usuarios, que tienen un perfil tecnológico y sabrán que es bueno actualizar el navegador, pero aun así y lamentablemente, casi un 12% de los visitantes acceden con Internet Explorer 6. En consecuencia ese representativo porcentaje, no está viendo la página en su mejor versión, ya que fallan cosas como los PNG con transparencia en canal Alpha, algunas capas descuadran, etc.

Así que, si pensamos que la web que estamos haciendo debe de verse bien para todos los usuarios, incluso aquellos que no han actualizado su navegador en los últimos años, podemos utilizar este recomendable hack CSS que no tiene inconveniente de uso alguno y es muy fácil de entender y aplicar.

Se trata de utilizar la declaración !important de CSS que sirve para que algunas reglas de estilo tomen preferencia sobre otras. En el presente hack CSS se explota un bug que hay en Internet Explorer 6, que hace que !important se ignore en determinados casos.

Nota: Si no sabes exactamente qué se conoce como "Hack" en las Hojas de Estilo en Cascada, te recomendamos leer el artículo Hacks CSS.

En concreto !important hace que los estilos marcados con esa declaración manden sobre otros que se puedan sobrescribir más adelante. Pero en IE 6 ocurre que ese !important se ignora cuando, en un mismo bloque o declaración, se sobrescribe un estilo marcado previamente como !important. Veamos esto con un ejemplo.

A{
   text-decoration: none !important;
   text-decoration: underline;
}

Como se puede ver, el primer text-decoration está marcado como !important, por lo que todos los navegadores lo entenderán como preferente y por tanto los enlaces (etiqueta A) no se verán subrayados. Pero en el mismo bloque de declaración hay una misma regla de estilos que sobrescribe a text-decoration, que no está marcada como !important. Lo que ocurrirá en la mayoría de navegadores es que esta segunda regla (que no era importante) no se tiene en cuenta. Pero Explorer 6, debido al bug comentado anteriormente y que estamos explotando en este hack, ignorará el primer !important y hará que los enlaces sí tengan subrayado.

Nota: Para terminar de aclarar este pequeño fallo de Internet Explorer 6, podemos ver el siguiente código:

A{
   text-decoration: none !important;   
}
A{
   text-decoration: underline;
}

En este caso, cono ambas declaraciones están en bloques diferentes, IE 6 sí que haría caso de la directiva !important. Osea, el hack que estamos comentando, sólo funcionará en el caso que la declaración important y la que se sobrescribe están en el mismo bloque de estilos.

Veamos otro sencillo ejemplo. Vamos a construir una clase CSS que altera el color del texto.

.miclase {
   color: green !important;
   color: red;
}

Como se puede entender, casi todos los navegadores harán que el texto aparezca en verde, ya que es la declaración marcada como !important. Sin embargo, Internet Explorer 6 ignorará el important en este caso (misma regla de estilos sobrescrita en el mismo bloque de declaración) y hará que el color sea rojo.

Para acabar, dejo un código de una página completo que explota este hack.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Hack Important IExplorer 6</title>
   <style type="text/css">
   A{
      text-decoration: none !important;   
   }
   A{
      text-decoration: underline;
   }
   .miclase {
      color: green !important;
      color: red;
   }
   </style>
</head>
<body>
   <p class="miclase">Si utilizas cualquier navegador medianamente moderno, lo verás en verde!!</p>
   <p class="miclase">Mientras que si utilizas Internet Explorer 6 lo verás en rojo. Comprobado!</p>
   <a href="http://www.desarrolloweb.com">http://www.desarrolloweb.com</a>
</body>
</html>

Podemos ver un enlace al ejemplo en marcha en una página aparte.

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

thievery

01/12/2010
Hacks
Se agradecen estos trucos a la hora de maquetar pero sinceramente cada vez esto es más lioso, entre php, jquery, xhtml, css y encima la arquitectura de la web con las accesibilidades y un montón de cosas más se te quitan las ganas de seguir trabajando en el sector y encima por lo que están pagando entre 800 a 1.000? al mes. Yo desde luego me fui hace 15 días de la empresa porque de 12 a 14 horas al día trabajando y haciendo todo esto una persona sin tener a nadie que te ayude es para echarse a llorar.
Me piro a Alemania 3.000? netos/mes más casa gratis y además no trabaja una persona con todas las tecnologías sino con unas pocas como es lógico, el que quiera saber webs de empleo para poder trabajar allí que me escriba un email y encantado se lo daré.

RODRIGO

04/12/2010
HACK CSS
Muy buen hack!!
Basta de cambiar el CSS dependiendo del navegador. Al menos no para el 6