El rincón de escribir

Imagen de una bota haciendo las veces de macetero

Publicado el

por


Solución al problema de compatibilidad entre HTML5 y los viejos navegadores (iE7, iE8, FF3)

Cuando nos enfrentamos al HTML5 y nos documentamos un poco, surgen dudas de si, a estas alturas, es un lenguaje estandarizado o si todavía está verde. Entonces tenemos que elegir entre usar el fiable y manido XHTML para llegar a todo tipo de exploradores o lanzarnos a la aventura del HTML5 y, o bien restringir nuestro público, o bien trabajar el doble para hacer versiones compatibles con todo lo que se nos ocurra.

Hace no mucho, Daniel Glazman, co-presidente del grupo de trabajo de CSS en el W3C, publicó un artículo advirtiendo del peligro de que el WebKit -de Chrome y Safari- acapare la atención de diseñadores y programadores en detrimento del resto de recursos web e instaba a los desarrolladores para que no veten sus proyectos a aquellos usuarios que llegan desde otras tecnologías, es decir, alentaba a no restringir el público y buscar versiones compatibles para que todos los navegadores web sepan interpretar nuestro trabajo [nota de Genbeta en español con enlace al artículo original en inglés].

Desde este punto de vista y queriendo trabajar el -no tan nuevo- HTML5, si se pierde un poco de tiempo buscando en Google, se encuentra un buen trabajo escrito en 7 páginas en el que explican con claridad dónde se genera el problema de compatibilidad y cómo solucionarlo con un simple JavaScript: Solución a los problemas de compatibilidad de IE8 y Firefox 3.6 con HTML5.

Dicho JS se encuentra, a su vez, alojado y explicado en el proyecto Google Code bajo el nombre de html5shim: HTML5 IE enabling script ahora en GitHub html5shiv … y lo poco que hay que hacer para que funcione es colocar, en el <head> de cada página web, la llamada al JavaScript para que, en caso de que el navegador desde el que se esté accediendo sea inferior al iE9, este JS se encargue de interpretar por él aquellos nuevos elementos del HTML5 que le son desconocidos. Aunque, de hecho no sólo funciona con iE, también debería hacerlo en Safari 4.x, iPhone 3.x y Firefox 3.x.

Código

Dejo aquí apuntado lo que hay que insertar dentro de la sección <head> para aplicar esta solución, pero os recomiendo visitar el enlace que acabo de apuntar para una versión completa y actualizada.

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Nueva vista desde iE8.

Ejemplo en funcionamiento

Para ponerlo en práctica -retomando el ejemplo que creé en la entrada “Cómo estructurar adecuadamente una página web en HTML5 (Parte II, incluyendo CSS)”- he insertado dicho código y, voilá, ahora si accedéis a este nuevo ejemplo desde un iE8 o inferior, deberíais ver lo mismo -con ciertas restricciones de estilo: sean transparencias, esquinas redondeadas…- que si venís desde cualquier otro explorador.

Un quebradero menos de cabeza. Un día un poco más alegre gracias al código libre.

Comentarios

4 respuestas a «Solución al problema de compatibilidad entre HTML5 y los viejos navegadores (iE7, iE8, FF3)»

  1. No funciona, aún sigo viendo la página descuadrada

    1. He vuelto a comprobar el ejemplo y yo sí consigo verlo «arreglado».

      Puedes probar 1) a seguir los pasos que recomiendan en http://code.google.com/p/html5shim/ de descargar el código y enlazarlo de manera local en el alojamiento de la propia web. 2) Usar la alternativa de http://modernizr.com/

      Suerte.

  2. ¿Cual opción crees que es mejor modernizr o este código que posteaste? o si en estos tiempo hay otra alternativa.
    Muchas gracias. Felices fiestas

    1. Tanto monta, monta tanto. Vamos, que lo mismo da uno que otro. Quizá Modernizr tiene mayor flexibilidad porque se puede personalizar, pero los dos funcionan. Yo he empleado ambos sin problemas. ¡Felices fiestas a vosotros!

¿Opiniones, dudas? Cuéntame…

This site uses Akismet to reduce spam. Learn how your comment data is processed.