> Manuales > Taller de CSS

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="https://desarrolloweb.com">http://www.desarrolloweb.com</a>
</body>
</html>

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

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual