Subscribe

viernes, 10 de septiembre de 2010

Compatibilidad de html5 con navegadores antiguos


Una de las primeras preguntas que me hice a mi mismo cuando empecé a leer cosas de html5 es, vale, todo esta muy bien, y parece que todo es más fácil y más potente y tal y tal, pero ..., ¿qué pasa con los navegadores antiguos?
El último ranking de uso de navegadores que vi por internet (de enero de 2010) ofrece la siguiente información:
1. Microsoft Internet Explorer: 62.12%
2. Firefox: 24.43%
3. Chrome: 5.22%
4. Safari: 4.53%
5. Opera: 2.38%

Mientras que por versiones:

1. Internet Explorer 8: 22.37%
2. Internet Explorer 6: 20.00%
3 Firefox 3.5: 17.08%
4. Internet Explorer 7: 14.53%
5. Firefox 3.0: 5.24%
6. Chrome 3: 3.85%
7. Safari 4.0: 3,57%
8. IE8 Compatibility Mode: 2.80%
9. Opera 10: 1.65%
10 Chrome 4.0 1.24
11. Firefox 3.6 : 1.15
12 Firefox 2.0: 0.78%

Para los que no sabéis del tema, en Internet Explorer se espera que a partir de la versión 9 sea compatible con algunas funcionalidades nuevas de html5, en las anteriores no hay ningún tipo de compatibilidad. En lo que respecta a Chrome, Firefox, Safari y Opera, la cosa cambia, desde hace tiempo vienen dando soperte a algunas características de html5, y cada nueva versión la lista de funcionalidades soportadas aumenta. 

Pero que hacemos con esa mayoría de usuarios que todavía usan versiones antiguas de Internet Explorer (de verdad que me mata que IE6 esté en segundo lugar con un 20%!!!!!) o versiones antiguas del resto de navegadores (mucho menos como podéis ver).

Pues era evidente que esta pregunta no solo me la he planteado yo, sino que desde el principio, los promotores de esta versión han ido pensando como hacerlo compatible.

Para ello se ha creado un javascript llamado Modernizr el cual nos ofrece una serie de funciones que detecta si el navegador es compatible con cada una de las nuevas funcionalidades de HTML 5.
Esto me recuerda mucho a cuando teníamos los problemas para hacer accesible nuestros portales, la eterna lucha con el javascript y el ofrecer alternativas a aquellos navegadores que no tienen javascript.

Pues eso, tenemos la opción de preguntar si la opción que queremos usar es compatible con el navegador cliente, si lo es, pues todo perfecto, en caso contrario mostramos una alternativa.
Por ejemplo, para saber si nuestro navegador interpreta los objetos canvas:

if (Modernizr.canvas) {
// pintamos el objeto canvas
} else {
// hacemos por ejemplo una llamada a un flash o imagen alternativa
}


Para el que quiera profundizar más en este tema recomiendo el capitulo 2 del libro “Dive Into HTML 5”.

Existe otra buena herramienta llamada html5.js. Este javascript se utiliza para hacer compatibles las nuevas etiquetas de html5 como header, footer, canvas, video, ..., en las versiones anteriores a la 9 del navegador Internet Explorer.

El script es el siguiente:

<!--[if lt IE 9]>
<script>
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]-->

Básicamente lo que hace es detectar si el navegador es un Internet Explorer anterior a la versión 9, y si es el caso crear los elementos propios de html5 en el objeto document (darlos de alta en el DOM de la página).
Para entender este script hay que profundizar en como se comportan los navegadores ante elementos desconocidos. 

La mayoría de los navegadores (firefox, safari, opera, chrome), cuando se encuentran un elemento que desconocen, lo cargan en el DOM marcándolo como elemento desconocido. Esto nos permite que, aun siendo un elemento desconocido por el navegador, podremos darle estilo mediante CSS sin problemas ya que es un elemento activo del DOM, y por tanto podremos trabajar con él sin problemas.

En los IE el criterio es distinto, en este caso cuando se encuentra un elemento desconocido pues lo ignora, y ni siquiera lo mete en el DOM. El problema en este caso es que, al ser ignorado, no podremos darle estilos ni poder operar con él.

En este último caso, el script toma un papel fundamental, lo que hace es crear a mano los elementos html5 en el DOM. En este momento, cuando IE se encuentra uno de esos elementos ya no lo considera como un elemento desconocido y lo introduce en el DOM. Esto hace que el comportamiento sea el mismo que en el resto de navegadores. Tener en cuenta que, para que todo esto funcione, el script debe iniciarse en el head de nuestra página, nunca en el footer ya que en este caso ya sería demasiado tarde.

Nuevamente, recomiendo para aquellos que quieran saber más del tema la lectura del libro “Dive Into HTML 5” (Capitulo 3).

Cuando descubra nuevas técnicas de compatibilidad entre html5 y navegadores antiguos os la seguiré contando.

3 comentarios:

Josepzin dijo...

Genial!!!!
Ese script es perfecto. Que maravilla esto del HTML5 :)

Anónimo dijo...

Muchas gracias, andaba buscando justo esto de compatibilizar versiones.

Anónimo dijo...

Rara vez hago un comentario, pero es que el tuyo esta muy bien redactado. Gracias por tu comentario ilustrado y explicado.

Publicar un comentario