Como detectar Internet Explorer 6, 7 y 8

Si te dedicas al desarrollo web o estás empezando a incursionar en esta actividad, seguramente ya sabrás cual es nuestro pero enemigo: sí, el Internet Explorer.

Este navegador posee tantas incompatibilidades que es prácticamente imposible que nuestros sitios se vean iguales en IE como en los otros navegadores.

En este artículo te enseño como detectar Internet Explorer 6, 7 y 8 , y así poder crear código personalizado para cada uno de estas versiones.

En las ultimas versiones de Internet Explorer se han corregido bastantes errores y se ha presentado una mayor compatibilidad que en las versiones mas antiguas.

Pero también es cierto que la mayoría de la gente no posee este navegador 100% actualizado y lamentablemente es uno de los browsers más usados.
Si a esto le sumamos que con cualquier instalación del sistema operativo Windows XP, por defecto se instala también el Internet Explorer 6….. el panorama no es el mas óptimo para nosotros los desarrolladores.

Afortunadamente existen varios trucos para poder detectar Internet Explorer en sus diferentes versiones y así poder escribir código CSS personalizado para cada versión permitiéndonos visualizar el sitio de igual forma en todas las versiones.

TRUCO 1 para detectar Internet Explorer

El truco mejor y mas utilizado consiste en usar los condicionales de comentarios.

Estos condicionales ( o preguntas del tipo «IF»), se colocan dentro de los símbolos de comentarios (<!–  –>) en el codigo CSS.
Y dentro de este condicional «IF» se coloca el codigo CSS a ejecutar dependiendo de la versión de IE detectada.

Por ejemplo, un condicional IF en CSS, para IE6 seria:

<!--[if IE 6]>
 Colocar AQUI las instrucciones específicas para IE 6
 <![endif]-->

En este ejemplo, se coloca el código a ejecutar entre medio del IF y el ENDIF.

TRUCO 2 para detectar Internet Explorer

Otra forma para realizar esto, es utilizar en CSS, una sintaxis específica para cada versión de IE.

Por ejemplo:

Internet Explorer 8

Para IE8 debemos agregar una barra diagonal invertida y un numero nueve «\9», al final de la linea CSS.

h1 {
 color : yellow\9; /* IE8 y anteriores */
 }

Internet Explorer 7

Para implementarlo en IE7 debemos agregar un asterisco «*», al principio de la linea CSS.

h1 {
 *color : yellow; /* IE7 y anteriores */
 }

Internet Explorer 6

Por ultimo, para el IE en su versión 6, debemos agregar un guión bajo»_», al principio de la linea CSS.

h1 {
 _color : yellow; /* IE6 y anteriores */
 }

El código CSS final combinado, entonces quedaría así:

h1 {
 color : yellow\9; /* IE8 y anteriores */
 *color : yellow; /* IE7 y anteriores */
 _color : yellow; /* IE6 y anteriores */
 }

De esta forma entonces, podemos detectar Internet Explorer en sus diferentes versiones.
Ahora solo bastará con personalizar cada código CSS para cada version de IE.

Cualquier duda que tengas, ya sabes que la puedes dejar aqui debajo en los comentarios.

Saludos!!
Cristian