Hack CSS para cargar estilos diferentes cuando el visitante tiene Internet Explorer 6, a través de la regla important de CSS.
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.
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.
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.
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.
.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...