Reseteando estilos CSS con comentarios condicionales

Cómo mostrar una web sin estilos CSS para Internet Explorer 6

Hasta no hace mucho, al trabajar en la maquetación de una web era importante dedicar un tiempo a corregir los errores de Internet Explorer 6 y asegurarse de que este navegador mostrara la web de una manera mínimamente decente. Hoy en día (octubre de 2010), por una parte la proporción de usuarios que aun utilizan este navegador es tan escasa, que muchos ya no pierden el tiempo con él, y por otra, a veces la diferencia entre como debería verse nuestra web y lo que se ve en IE6 es tan grande (por el uso de transparencias, posicionamientos, etc.) que a veces es mejor mostrarles a estos usuarios “rezagados” una página sin ningún estilo.

Es lo que he tenido que hacer, por ejemplo, en un proyecto reciente para Radio Pollença. La utilización intensiva de transparencias, combinación de elementos posicionados, fondos, bordes, etc. hacían que fuera preferible la opción de ver la web sin estilo, que verla totalmente deformada.

Cuando queremos pasar estilos a una versión concreta de Internet Explorer, utilizamos los comentarios condicionales (conditional comments). En este caso lo que hacemos es añadir estilos específicos para ese navegador. Pero si lo que queremos es que no muestre ningún estilo, es decir, resetear los estilos, tenemos dos opciones: sobreescribir todo el código, anulando todas las propiedades del CSS principal (una locura en cualquier web mínimamente trabajada), o bien usar estos condicionales:

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="ie7.css" />
<![endif]-->

Este código esconde todos los estilos del CSS principal para IE6 e inferiores. Lógicamente hay que ponerlo en el <head>, sustituyendo la llamada a la hoja de nuestro CSS principal. Lo que estamos diciendo es: si el navegador no es IE, utiliza este CSS, y si es IE7 o superior, usa estos estilos (los mismos). Por tanto, todo lo que queda fuera de estos condicionales (IE6 e inferiores), se queda sin estilos CSS.

La última parte (el tercer bloque) no es necesaria, pero como sigue siendo importante hacer algunos retoques en el CSS para que Internet Explorer 7 (que aun tiene una cuota de uso bastante alta) se comporte como debería, está bien dedicarle una hoja de estilos aparte y añadir ahí todas las reglas que sean necesarias.

Desde que algunos actores importantes en la escena de Internet decidieron por fin dejar de lado a este navegador (Youtube, Facebook, Gmail, PayPal…), cada vez más gente se ha ido animando a hacer lo mismo y dejar de preocuparse por IE6, con los beneficios que eso conlleva: libertad para utilizar transparencias con imágenes PNG, min-width, min-height, bordes redondeados, sombras… y por supuesto, poder dejar atrás la frustación de perder horas y horas arreglando lo que está bien. Era un lastre demasiado pesado para Internet y especialmente para los diseñadores y desarrolladores web.

De hecho, existen incluso extensiones y scripts para bloquear completamente IE6 y animar así al usuario a que se vaya actualizando, como IE6 blocker script (Javascript/jQuery) o Block IE6 (plugin para WordPress). Aunque una solución más “amable” puede ser mostrar un mensaje personalizado para el usuario de IE6. Lo haríamos así:

<!--[if lte IE 6]>
<div id="ie6">
Estás usando Internet Explorer 6, un navegador muy antiguo e inseguro,
por lo que no verás esta web tal como ha sido programada. Por favor,
actualiza tu navegador o, mejor aún, descarga alguno mucho mejor como
<a href="http://www.mozilla-europe.org/es/firefox/">Firefox</a> o
<a href="http://www.google.com/chrome?hl=es">Chrome</a>.
</div>
<![endif]-->

De todas formas, hoy en día en muchos casos la mejor opción es ignorar completamente este navegador, no hacer nada: ni mensaje, ni web sin estilos, ni perder un minuto más con él.

Como dato curioso, Internet Explorer 6 tiene su propia tumba online, donde se puede leer que el conocido por los amigos como “IE6″ murió la mañana del 1 de marzo de 2010 en Mountain View, California. Y en esta otra web se puede ver el porcentaje de uso de este navegador por país, con datos actualizados mes a mes.

Más información sobre cómo eliminar los estilos CSS para IE6 con comentarios condicionales (en inglés):

Finalmente, y en el caso de que estemos usando WordPress, se podría incluso crear un theme específico para los usuarios que visiten nuestra web con este navegador. Aquí explican cómo hacerlo (en inglés): Forcing A Different Theme For IE6 Users

Comentarios

  1. chotiro

    Gran post Daniel. Me viene de lujo. Te sigo por RSS y desde luego te lo has currado, porque es supercompleto.

    Muchas gracias.

  2. Daniel

    Muchas gracias! La idea de escribir sobre esto era precisamente porque es algo que no está muy documentado en Internet, y menos en español, así que me alegro mucho de que te haya servido.

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)