Comentarios condicionales en Internet Explorer


Uno de los mayores dolores de cabeza de un programador web reside en la maximización de la compatibilidad entre navegadores. O dicho de otro modo: programar y -especialmente- maquetar una página que funcione perfectamente en todos los navegadores.

Hasta ahora, lo más común era controlar las diferencias (especialmente a nivel de css y javascript) entre Firefox e Internet Explorer. Lejos de acabar en debates sobre estas diferencias, nos centraremos en un nuevo dolor de cabeza que ha surgido hace relativamente poco: los problemas de compatibilidad entre versiones de Internet Explorer.

Pese a que la versión 6 de Internet Explorer está avocada a la extinción, aún hoy es requisito fundamental en la firma de muchos proyectos orientados a internet. Es por eso que algunos bugs de esta versión, o algunas funcionalidades que son tratadas de forma distinta, siguen dando quebraderos de cabeza.

Una de las posibilidades para solventar este problema reside en los comentarios condicionales.
Un comentario condicional es una estructura de control que únicamente interpreta Internet Explorer, siendo capaz de tener en cuenta o no el contenido de la cláusula si se cumple o no la sentencia. Como ejemplo, podremos cargar dentro del HEAD de nuestra página una CSS u otra dependiendo del navegador que utilice el cliente. Así, si existen problemas de compatibilidad con CSS o Javascript con la versión 6, crearíamos un fichero CSS alternativo optimizado para este navegador (idem para los ficheros javascript), dejando la cabecera de nuestra página de una forma similar a la siguiente:

<head>
<title>Página Principal</title>

<!--[if IE 6]>
<script language="javascript" type="text/javascript" src="js/funciones_ie6.js"></script>
<link href="css/estilos_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lte IE 5]>
<script language="javascript" type="text/javascript" src="js/funciones_ie5.js"></script>
<link href="css/estilos_ie5.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if gte IE 7]>
<script language="javascript" type="text/javascript" src="js/funciones_ie7.js"></script>
<link href="css/estilos_ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!-- CSS y Javascript común para todos los navegadores -->
<script language="javascript" type="text/javascript" src="js/funciones.js"></script>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />

</head>

El código anterior realizará lo siguiente:
Cargará los dos primeros enlaces si el explorador detectado es IE 6.
Cargará los dos siguientes enlaces si el explorador es igual o menor (lte, Lesser Than Equal) que IE 5.
Cargará los dos siguientes enlaces si el explorador es mayor o igual (gte, Greater Than Equal) que IE 7.
En cualquier caso y en todos los exploradores, cargará los dos últimos enlaces.

Para más información podría ser aconsejable consultar este artículo o este otro.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s