comparte el articulo 

Como detectar el uso de Internet Explorer 6, 7 y 8

Actualizado el 10/04/2012 < > 0 Comentarios

Resumen: En este artículo vemos la manera de detectar el uso de IE 6, 7 y 8 mediante cuatro caracteres en nuestro código de estilo

Es de casi asegurar el hecho de que todo aquel programador que ha tenido experiencia en el ámbito del desarrollo web se ha visto envuelto en alguna clase de problema con Internet Explorer. Ya sea de forma directa o indirecta este navegador, identificado por el famoso icono de la “e” azul, ha representado un reto y horas extra de codificación para todos los proyectos que se emprenden.

Su inestabilidad y falta de estándares han hecho que de él no se tengan buenos conceptos, y razones no faltan para hablar mal. Desde hechos tan sencillos como el despliegue incorrecto de una imagen hasta casos extremos donde el estilo completo de una página se ve afectado, transparencias, capas flotantes, efectos de sombreado, estilizaciones, todo esto puede verse alterado en alguna de sus versiones.

Si bien es cierto que este en su última versión ha presentado grandes mejoras y el soporte a nuevas tecnologías se ha puesto como prioridad, el uso de sus versiones anteriores y la poca estandarización de estas producen dolores de cabeza a por mayor, pues tenemos que afrontar la verdad y darnos cuenta de que aún existen millones de personas utilizando alguna versión vieja de este navegador por lo que tenemos que seguir brindado soporte.

Algunas de estas versiones, como es el caso de Internet Explorer 6, han sido oficialmente declaradas como muertas, pero en países como China este explorador sigue siendo el más utilizado y el simple hecho de dar formato a un disco duro e instalar de nueva cuenta el sistema operativo Windows XP hace que Internet Explorer 6 tome la riendas de la navegación web de nuevo, por lo que no lo podemos pasar por alto.

Que la innovación es importante lo sabemos, que la estandarización y las nuevas tecnologías es lo que se debe practicar sin duda, pero hay que recordar que no vivimos en un mundo de desarrolladores, allá afuera existen personas que saben poco o nada de estándares o de navegadores actualizados, ellos solo quieren entrar a Internet buscar algún producto o información y obtenerlo.

Esta clase de personas también serán nuestros clientes o los clientes potenciales de los sitios para los que trabajamos, no podemos llegar con la persona que nos contrató y decirle algo como “El sitio quedó muy bien, pero sólo se verá bien en Firefox y Google Chrome, en IE fallará pero no importa el 40% de los visitantes la verán bien”.

Por esta razón principalmente tenemos que buscar “hacks” y manera de adaptar nuestro sitio para que Internet Explorer pueda por lo menos simular lo que queremos lograr. En esta ocasión tratamos el tema de como detectar el uso de alguno de estos navegadores mediante caracteres en nuestro código CSS, son 3 simples expresiones que nos ayudan a determinar que un estilo para cada versión del navegador ya sea Internet Explorer 8 o inferior.

Antes de empezar con el desarrollo debemos aclarar que esta no es la mejor práctica y se debe utilizar sólo en casos donde sabemos que existirán pocos cambios en el estilo, la mayor parte del tiempo debemos utilizar el condicionamiento en comentarios como este:

<!--[if IE 6]>
Instrucciones especiales para IE 6 aquí
<![endif]-->

Si deseamos un comportamiento especial en cada versión, pero estos caracteres se pueden tomar como un atajo o algo sencillo a realizar cuando no exista mucha diferencia de un estilo a otro, y al final del día es un conocimiento extra que nos puede ayudar en el futuro.

IE8 y anteriores

La clave para rastrear Internet Explorer 8 y versiones anteriores esta conformada por dos caracteres, una diagonal invertida y el número nueve al final de la sentencia de estilo. Por ejemplo:

    body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 y anteriores */
    }

Desafortunadamente este hack únicamente puede ser utilizado para rastrear la versión 8 y anteriores, no podemos implementar algo como “\IE” para saber si el navegador es Internet Explorer en general.

IE 7 y anteriores

Para identificar al navegador IE 7 o alguna versión anterior utilizamos el caracter asterisco “*”. En este caso el caracter lo usaremos al principio de la sentencia y no al final como en el ejemplo anterior, es entonces que el código nos quedaría de la siguiente manera:

body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 */
     *color: green; /* IE7 y anteriores */
    }

IE6

Por su parte Internet Explorer 6 es representado por un guión bajo “_”, o underscore, el cual también se coloca al inicio de la declaración de estilo y en este caso únicamente servirá para rastrear la versión 6.

body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 */
     *color: green; /* IE7 */
     _color: purple: /* IE6 */
    }

Conclusión

De esta manera podemos incluso personalizar el sitio en base a la versión del cliente, mostrar alguna capa o ocultar algunas otras, incluso desplegarle algún mensaje que le recomiende bajar otro navegador. Como ya explique el uso de estos caracteres selectores debe hacerse con cuidado y no exagerar en su implementación, puesto que no sabemos si en un futuro estos hacks seguirán siendo utilizados o representarán lo mismo.

Publicado el 21/07/2011, última actualización 10/04/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño Paginas Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras