IE7-js compatibilidad de Internet Explorer con navegadores modernos

  • Por
Libería Javascript ie7-js, para hacer que Internet Explorer se comporte como los navegadores modernos y acepte los estándares del HTML5.
Estamos ante una librería bien sencilla de implementar, pensada para acabar con los dolores de cabeza que Internet Explorer nos produce a muchos desarrolladores cuando se trata de hacer que un sitio web se vea igual en este navegador que en otros clientes web modernos.

La librería ofrece básicamente compatibilidad con Microsoft Internet Explorer ¡¡desde la versión 5.5!! hacia adelante, por medio de unos scripts Javascript muy sencillos de instalar. Realmente será copiar y pegar un pequeño código que incluye el script, con un condicional para que solamente lo cargue cuando sea necesario.

Nota: No ofrece compatibilidad con Internet Explorer 9, pues este navegador ya ha dado un salto de calidad, o mejor dicho, de respeto a estándares abiertos, por lo que su forma de trabajar ya es muy compatible con los navegadores de última generación.

La librería en cuestión se llama ie7-js y la podemos encontrar en la URL
http://code.google.com/p/ie7-js/

Para qué nos sirve IE7-js

Esta librería tiene varias funciones, todas enfocadas en conseguir que Internet Explorer se comporte mejor al representar nuestro sitio web. Básicamente lo que hace es adecuar la manera en la que las versiones antiguas de IE interpretan una página web, para que trabajen tal como sugieren las especificaciones de la W3C.

Para empezar, nos puede servir para algo tan sencillo como evitar tener que escribir estilos CSS y código HTML específico para Internet Explorer, en cada una se sus versiones anteriores a la 9. El resultado redunda en el ahorro de mucho tiempo, en horas de optimización de un sitio web, simplemente para conseguir que se vea correctamente en Internet Explorer.

Los distintos scripts de IE7-js nos sirven para conseguir solucionar muchas diferencias u omisiones de funcionamiento de los navegadores de Microsoft, en el código HTML y CSS, en temas como:

  • Posicionamiento de capas en modo "fixed".
  • Incorporación de selectores avanzados en las CSS como parent > child
  • Soporte a atributos variados como min-width y max-width, así como min-height y max-height.
  • Soporte a pseudo-elementos de las CSS, como :hover :first-child ::after, :focus, :last-of-type...
  • Interpretación errónea del modelo de caja
  • Elementos semánticos del HTML5, como article, header, footer, aside, audio, video, canvas...
  • Estilos CSS para opacidad de elementos.
  • Soporte para transparencia de PNG en IE6.
La lista es interminable y se puede ver en la propia documentación de la librería: Propiedades, selectores y demás reparaciones que realiza IE7-js.

Cómo cargar la librería IE7-js

La manera de incorporarla a una página web es muy sencilla. Para ello simplemente tienes que escribir un código en la cabecera de tu web que ellos mismos te proporcionan. Además, los scripts están separados en diversos bloques que debes cargar opcionalmente, dependiendo del grado de compatibilidad que quieras asegurar hacia adelante.

Compatibilidad de IE5 e IE6 con IE7:

Si deseas que Internet Explorer 6 (o incluso IE 5) funcionen igual que Internet Explorer 7, debes escribir el siguiente código.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

Nota: Como puedes observar en el código anterior, se coloca el script dentro de un comentario HTML, por lo que los navegadores modernos no interpretarán el código en ningún caso. Luego, dentro del comentario, se inserta un condicional que solamente Internet Explorer idenfitica [if lt IE 7]. Eso indica a IE que lo que hay dentro del condicional solo tiene que ser interpretado por IE menor que 7. Por ello ese script sólo lo ejecutarán versiones anteriores a IE7. De este modo, se asegura que solo los navegadores IE5 e IE6 van a cargar el script de compatibilidad con IE7, para renderizar el documento HTML tal como lo haría la versión 7 del navegador de Microsoft.

Compatibilidad de IE7, o menor, con IE8:

Si deseas que Internet Explorer 7, así como las versiones anteriores, se comporten igual que Internet Explorer 8, debes escribir el siguiente código.

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

Compatibilidad de IE8, o menor, con IE9:

Por último, ofrecen el script completo que aseguraría la compatibilidad con cualquier navegador menor o igual que IE8 (es decir, desde IE5 hasta IE8), para que se comporte igual que Internet Explorer 9.

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

De este modo, cubrimos todos los Internet Explorer antiguos y hacemos que se comporten como la versión 9, que ya funciona bastante bien.

Nota: Por si no ha quedado claro, no es necesario incluir todos los scripts, sino uno de ellos, dependiendo del grado de compatibilidad que queremos alcanzar. Por ejemplo, si quieres que todos los Internet Explorer interpreten el HTML y CSS como IE9, solamente tendrías que incluir el último script.

Sobre soporte a transparencia de PNG

Puede que hayas observado en Internet Explorer 6 que los archivos con imágenes PNG que incorporan transparencias se ven incorrectamente. Este es un asunto desagradable que muchos de nosotros obviamos, por no querer prestar atención a un navegador tan antiguo. Sin embargo, para otros desarrolladores la transparencia PNG en Internet Explorer 6 puede ser un asunto crítico.

Este script lo soluciona también, lo que es de agradecer, pero debemos tener en cuenta varios detalles. Hay uno que resulta importante señalar.

Solamente soluciona el problema de la transparencia para los archivos que hayas nombrado como *-trans.png. Por ejemplo miarchivo-trans.png. Esto se realiza por razones de rendimiento, pero si lo deseamos, podemos activar a todos los archivos de formato PNG con la declaración de una variable.

var IE7_PNG_SUFFIX = ".png";

Ese código lo tienes que ejecutar, con un script Javascript, antes de cargar las librerías.

Conclusión

De momento eso es todo. Yo he utilizado este script con éxito en una web donde quería que me interpretara las etiquetas estructurales de HTML5 y los resultados han sido excelentes. Obviamente, soluciona muchos otros problemas que nos pueden venir bien, pero ya solo por ese detalle merece la pena incorporarlo.

El uso del script de compatibilidad, como se ha podido ver, es muy simple. No importa cuan complicado puede ser por dentro, lo único que tenemos que hacer es incluirlo en la cabecera y desarrollar nuestra web sin importarnos todos esos asuntos relativos a las versiones antiguas de Internet Explorer que tanto nos molestan y nos dan trabajo.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

rafa

26/6/2012
No funciona
he implementado el código en mi web y no funciona, esta probado que funcione o esta en prueba?

juanka3666

01/7/2012
Enhorabuena
Rafa deberías revisar el código que has usado puede que no sea el ie que tienes ya que da el código de distintas versiones, un saludo aunque yo no programo para ie me olvidó de quite existe, aunque soy un diez a esta gente que se preocupa por todos

RAMONCON

04/7/2012
Prueba
Acabo de implementarlo en una aplicación para distribuir en formato descargable (web completa en un cd o rar) y funciona mucho mejor que otras soluciones que he probado (aunque no al 100 %, si al menos al 90 %).
Un gran aporte

Tony

04/7/2012
Compatibilidad IE
Hola. Yo he tenido problemas de compatibilidad con las diferentes versiones de IE y se han solucionado colocando etiquetas en el head de la página de este tipo

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>

Como dato complementario diré que estaba usando ASP.NET. Pero creo que funcionaria en cualquier otro framework, aunque no lo he probado.

¿Hasta que punto es necesaria la librería js que se referencia en este articulo?

Gracias.

PD. Por error postee este comentario en otro artículo, pido disculpas a los usuarios