Explorer go home

Quienes trabajamos en el desarrollo de sitios web sabemos que el Internet Explorer, de Microsoft, es de lo peor. Lo sabemos, no por nuestro fanatismo geek, los numerosos artículos que versan sobre sus vulnerabilidades en materia de seguridad, o por boca de terceros, sino porque sufrimos diariamente sus caprichos y su incorrecta interpretación de código HTML y CSS.

Cuando terminamos de escribir el código y los estilos de un sitio, cuidando que todo esté acorde a los estándares dictados por la W3C, y pasamos a testearlo en diferentes navegadores, vemos que la mayoría muestra las páginas de la forma esperada… la mayoría, salvo el Internet Explorer. De ahí que estamos obligados a introducir hacks —en muchos casos incluso código no estándar— para reparar el problema. Este fenómeno suma horas, complicaciones inesperadas, incertidumbre y stress a nuestra tarea de desarrollo.

Una posible solución a largo plazo, es procurar que los usuarios elijan otros navegadores y dejen de utilizar IE (algo que está ocurriendo: las estadísticas de los últimos años muestran cómo viene perdiendo terreno el que alguna vez fue el navegador más utilizado).

Educar al soberano:

Dejar de incluir hacks en los sitios que desarrollamos sería una buena táctica; algo así como una guerrilla de insurrectos desarrolladores web —aunque convengamos que sería complicado explicarle a nuestro cliente que ve su sitio destartalado porque está utilizando Internet Explorer, que es el peor navegador, y entonces debiera cambiarlo y utilizar Firefox, o Chrome o Safari, lo mismo que los demás visitantes del sitio—. Eso es imposible. El cliente quiere que su sitio se vea perfecto en todos los principales navegadores, especialmente en el bendito Explorer.

Estos pocos días que transcurrieron desde que puse en marcha mi blog personal me han enseñado mucho. Ayer, por ejemplo, pensé que tener un sitio web personal implica hacer lo que se me de la gana. Decidí que no agregaría hacks para solucionar los errores de interpretación de IE, y que aportaría mi granito de arena para explicarle a los navegantes usuarios de Explorer que les convenía utilizar otros navegadores. Decidí incluir un cartel —visible únicamente para usuarios de IE— que los alerte e invite a probar otras alternativas.

Hay muchas maneras de presentar contenido únicamente a Internet Explorer. Voy a explicar a continuación cómo está resuelto en el caso de este sitio web en particular.

A modo de receta de cocina, diré que haremos uso de:

  • los comentarios condicionales de IE.
  • un poco de javascript no intrusivo.
  • css a gusto para condimentar.

Comentarios condicionales:

Quizás porque la gente de Mircosoft sabe que su navegador deja mucho que desear, inventaron una forma fácil para que los desarrolladores podamos escribir código que sólo el IE pueda ver; lo hicieron en la forma de comentarios de HTML, pero con una estructura estándar que el IE leerá.

Haciendo uso de esta posibilidad, podemos agregar un archivo JavaScript externo, que sólo IE verá. Escribiendo el siguiente código dentro de la etiqueta head:

<!--[if IE]>
    <script type="text/javascript" src="ruta_al_archivo_javascript.js"></script>
<![endif]-->

Los demás navegadores verán eso como parte de un comentario de HTML, y no cargarán el JS externo.

Un poco de JS no intrusivo:

A continuación, utilicé un poco de JavaScript para escribir contenido en el HTML. ¿No podría haber escrito el código HTML directamente dentro de la etiqueta body, utilizando los comentarios condicionales propios de IE? Sí, lo podría haber hecho, pero preferí utilizar JS porque no quería ensuciar el código HTML (ni siquiera con un “comentario”) con todo este asunto. Cada cual podrá sopesar qué le conviene, según el caso.

El código JS será algo así:

// definir la funcion escribirCartelIE:
function escribirCartelIE() {
    // chequea que funcione el control del DOM desde JS:
    if (!document.getElementsByTagName){
        return;
    }
    // crear una referencia al body:
    var body_element = document.body;
    // modificar el contenido del body, agregándole un poco de HTML al principio:
    body_element.innerHTML = '<div id="cartel_ie"><p>Ups! Est&amp;aacute;s utilizando Internet Explorer.</p><p>El <strong>Microsoft Internet Explorer</strong> es un navegador web inseguro, inc&amp;oacute;modo y cuya habilidad para mostrar correctamente las p&amp;aacute;ginas web deja mucho que desear. Por fortuna, no es el &amp;uacute;nico navegador que existe en el mercado. Te recomiendo que pruebes alguno de los siguientes navegadores:</p><ul><li><a href="http://www.mozilla.com">Mozilla Firefox</a></li><li><a href="http://www.google.com/chrome">Google Chrome</a></li><li><a href="http://www.apple.com/safari/">Apple Safari</a></li><li><a href="http://www.opera.com">Opera</a></li></ul></div>' + body_element.innerHTML;
}
// hacer todo cuando se cargue el HTML:
window.onload = escribirCartelIE;

Desde ya, el mensaje puede ser otro. Estoy seguro de que tendrán más imaginación que yo a la hora de redactar el texto.

Fíjense que no incluí código JS en el html. Recuerden que es siempre conveniente mantener separado el contenido (HTML), de la presentación (CSS) y del comportamiento (JS).

CSS a gusto:

Cuando el IE termine de cargar la página, ejecutará la función escribirCartelIE, que modificará el contenido del HTML. A partir de ese momento, el HTML literalmente tendrá nuevos elementos: un div con id cartel_ie y su contenido.

Las órdenes de cómo deben presentarse estos elementos, pueden estar junto con los demás selectores, en el archivo CSS que se esté usando. Esto no afecta al resto del contenido del CSS. Los navegadores que no tengan ese elemento en el HTML, no aplicarán esas órdenes del CSS.

Aquí, a modo de ejemplo, el código CSS que se está utilizando en este sitio:

/* css para IE */
#cartel_ie {
    width: 428px;
    padding: 10px;
    border: 1px dotted #F0F;
    font: 13px/1.5em Georgia, "Times New Roman", Times, serif;
    margin: 10px auto 5px 249px;
}
#cartel_ie .titulo {
    font: 16px "Courier New", Courier, mono;
    color: #F0F;
}

¡Los invito a hacer una movida similar en sus sitios web personales! Un pequeño banner no basta.

Tags: , , , , , ,

4 Responses

  1. Daniela dice:

    Muy bueno Lucks! me pareció una buena manera de aportar un poco a la causa “elimine su explorer”…
    Otra cosa que me gustó, fue el hayas puesto varios de los navegadores y no solo firefox, hay que darle a los usuarios la posibilidad de elegir entre la gran variedad que hay :D

  2. ¡Así es! Era muy importante para mí no reproducir aquella historia pasada de “Este sitio fue especialmente desarrollado para Internet Explorer”, pero con Firefox. De ahí que la libre elección del navegante me pareció fundamental.
    El mensaje debía estar dirigido a que al usuario no le conviene utilizar IE, y proponerle algunas alternativas.
    ¡Súmense a la movida! Los sitios web personales son el lugar perfecto para hacer este tipo de acciones.

  3. ferkin7 dice:

    great ! theme, loove it

  4. Thanks ferkin7!!! I coded it in one night, improvising on the code (not having it previously designed).

Leave a Reply