HTML5 en Internet Explorer 8

Hace cosa de 2 años comencé a publicar alguna cosilla sobre HTML5. La verdad es que no era gran cosa, pero lo suficiente para hacernos una idea de que en SEO la cosa no iría nada mal. Y como hace ya 3 meses que puse este sitio web en HTML5 me he decidido ha hacer algún repaso poco a poco sobre los cambios.

Antes de nada comentar que «los buscadores» parece que ya leen el HTML5 y le están dando ya peso a las cosas como se las tiene que dar. Al cabo de las 4 semanas, sin cambios aparentes (ya que fui publicando lo mismo sin tener ningún enlace fuerte ni nada parecido) el tráfico del blog aumentó un 30%.

Eso sí, uno de los problemas más grandes que me he encontrado es que el CSS no se veía bien en Internet Explorer 8. Pero he encontrado una forma «un poco chapucera» pero efectiva de que funcione. Digo chapucera porque, como siempre, hay que meterle «algunas cosillas» al Explorer para que las trate antes de pintar por pantalla. Aún así, que conste, que no me quejo del navegador ya que HTML5 no es un estándar todavía y no tiene ninguna obligación de darle soporte, aunque he de reconocer que «lo poco que he usadO» en Opera, Chrome y Firefox se ve.

El problema

Si tenemos un código como el siguiente, todos los navegadores excepto Explorer saben tratar el nuevo DOM anidado…


<style type="text/css">
article { display: block; border: 1px solid red; }
</style>
...
<article>
<h1>Bienvenido a JavierCasares.com</h1>
<div>Esto es un mensaje de prueba.</div>
</article>


En este caso, el DOM debería ser anidado de forma que «article» incluye «h1» que a su vez incluye «div». Pero no, Explorer aún tiene que «article» está al mismo nivel que «h1» que, en este caso, sí que incluye «div».

La solución

El pollo gordo viene a ser que el DOM no tiene en cuenta los elementos como tales, por lo que «hay que crearlos» en Explorer y así los tendrá en cuenta a la hora de poder ofrecer diseño con CSS o ejecuciones de procesos con JavaScript.

para ello, hay que añadir en el «head» de nuestra página el siguiente código:


<!--[if IE]>
<script type="text/javascript">
var e = ("abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video").split(',');
for (var i=0; i<e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->


De esta forma creamos todos los nuevos elementos (tags) del HTML5 que no existen en versiones anteriores y «de repente» la web se verá igual que en el resto de navegadores si navegamos con Internet Explorer 8…

NOTA: no tengo Internet Explorer 7, por lo que no sé si funcionará en versiones anteriores… aunque la teoría dice que debería.