Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

HTML5 VIII

Internet Exporer

Problemas con Internet Explorer

El navegador Internet Explorer es el único que no ha adoptado aún las características básicas del nuevo HTML 5, Sin embargo no todo está perdido en Internet Explorer, ya que lo que le ocurre al navegador es que no reconoce las nuevas etiquetas de HTML 5.

Internet Explorer no reconoce como propias las etiquetas de la estructura de la página, por lo que simplemente las ignora, y coloca el texto plano como si no tuviera etiquetas. Etiquetas fundamentales para crear una página, tales como header, nav, aside, article, footer son ignoradas.

Nuevas etiquetas en Internet Explorer

La solución la encontramos en la página-blog de Javier Casares HTML5 en Internet Explorer, donde nos propone que la solución está en crear los nuevos elementos en el DOM. Una vez creados éstos admitirán tanto el diseño con CSS como con Javascript.

En la página nos ofrecen el siguiente código que debemos añadir a nuestra página, como un script más:

<!--[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]-->

La solución es simple y consiste en lo siguiente: Primero comprobamos que el navegador que estamos utilizando es Internet Explorer; Creamos después un array con los nombres de todas las etiquetas nuevas de HTML5, por último creamos nuevos elementos con los nombres de las etiquetas al nivel del documento.

Usar un archivo javascript externo

La solución funciona ya que las etiquetas se crean, pero tiene algunos pequeños fallos que debemos corregir. En primer lugar queremos modificar el código de manera que podamos colocarlo en un archivo javascript externo. Esto nos permitirá no tener que escribir todo el código en cada una de las páginas. ya que sólo tenemos que escribir el línk al archivo:

<script type="text/javascript src="ie.js"></script>

Y el archivo javascript (ie.js) será el siguiente.


var nav=navigator.userAgent;
var buscarie = nav.indexOf("MSIE");

if (buscarie!=-1) {
   var e = new Array("article","aside","audio","canvas","datalist","details","figure","footer","header","hgroup","mark","menu","meter","nav","output","progress","section","time","video");
   for (var i=0; i<e.length; i++) {   
       elemento=document.createElement(e[i]);
   }
}

Ajustes en CSS

El segundo problema que tiene este código es que los nuevos elementos que se crean son todos elementos "en linea", sin embargo la mayoría de ellos en HTML5 son elementos "de bloque", esto hace que las nuevas etiquetas no se vean bien en Internet Explorer, a no ser que corrijamos este defecto.

Por tanto en la página debemos añadir el siguiente código CSS que convierte algunas etiquetas de HTML5 en elementos de bloque:

article,aside,audio,canvas,figure,footer,header,hgroup,menu,nav,section,video {display: block;}

El código lo incluimos al principio del archivo o script CSS que tenga la página, con esto solucionamos el problema y veremos en Internet Explorer todas las etiquetas de estructura igual que en el resto de navegadores.

Ejemplo de HTML 5 con Internet Explorer:

La página del siguiente enlace está hecha con las nuevas etiquetas de HTML5, sin embargo, al incluir en su código el script anterior, y el código CSS se ve igual en Internet Explorer que en el resto de navegadores:

Página de ejemplo

El código de la página lo mostramos en el siguiente enlace, el él vemos cómo hemos incluido tanto el javascript como el CSS indicado en esta página:

Código de página anterior






Aquí acaba este manual de HTML 5. Esto es sólo una breve introducción al tema, ya que todavía queda mucho hasta que HTML 5 sea una realidad en la forma de construir páginas. Hemos dejado aparte la aplicación "canvas" a la cual, por su extensión, dedicamos otro manual.



Manual HTML5

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo