Compatibilidad con etiquetas semánticas del HTML5 con html5shiv

  • Por
El componente html5shiv de las librerías Modernizr nos ayuda a crear webs compatibles con las etiquetas nuevas de HTML5 que funcionan en todos los navegadores.
Modernizr está ocupando un lugar destacado entre las herramientas habituales de cualquier desarrollador que quiera realizar webs de última generación, compatibles con la mayoría de los navegadores web, incluso los más antiguos. Existen diversas utilidades que nos pueden facilitar mucho la vida cuando realizamos un sitio web en el que queremos incorporar características avanzadas de HTML5, como venimos relatando en el Manual de Modernizr.

En esta ocasión os queremos hablar de uno de los componentes de Modernizr, que nos ofrece soporte a etiquetas que han aparecido nuevas en la versión más reciente del lenguaje de la web, como son las etiquetas semánticas y etiquetas estructurales del HTML5.

Script html5shiv para habilitar HTML5 en Internet Explorer

El componente que queremos comentar en este caso, que forma parte de Modernizr, pero que también podemos obtener por separado se llama html5shiv. Incorpora, gracias a la inclusión de un script Javascript, soporte para los nuevos elementos o etiquetas de HTML5.

Lo podemos encontrar de manera predeterminada en las descargas que realizamos con Modernizr, pero también lo podemos descargar de manera independiente en https://github.com/aFarkas/html5shiv

También lo encontraremos disponible comprimido y listo para usar en IE, en otros dos repositorios diferentes de Google Code y http://code.google.com/p/html5shim/
El script no solo provoca que versiones antiguas de Internet Explorer entiendan las etiquetas nuevas del HTML5, sino que también incorpora unos estilos predeterminados para esos nuevos elementos, como los ARTICLE o SECTION.

Pero, aunque el caso más relevante de incompatibilidad con HTML5 es el de Internet Explorer, porque los navegadores no se actualizan por si mismos, otros clientes web también tienen bajo soporte a las nuevas etiquetas incorporadas en la última versión del lenguaje de la web. Es por ello que este proyecto también ofrece soporte a Safari 4.x, Safari basado en iOS 3.x, y Firefox 3.x.

Usar html5shiv de manera independiente

Si queremos utilizar esta librería por separado (o sea, sin formar parte del paquete de scripts Modernizr) basta con que insertemos el siguiente código en la cabecera de nuestro documento HTML:

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

Esto hace que, mediante un condicional que solo lee Internet Explorer, se cargue el script únicamente para los navegadores que lo necesitarían.

Nota: En este caso además vemos que el condicional provocará que el script sólo lo lean los IE con versión menor que la 9. Esto es porque IE9 ya es capaz de entender las etiquetas que han sido incorporadas en HTML5.

Usar html5shiv como parte de Modernizr

Si estamos pensando en usar diversas capacidades del HTML5 y CSS3, además de las etiquetas nuevas del lenguaje, podemos considerar descargarlo como uno de los paquetes incorporados a la super-librería Modernizr. Ello nos puede ayudar a compatibilizar muchas otras caracerísticas de la nueva versión del lenguaje para la web.

En este caso tendríamos que descargar Modernizr asegurándonos que se incluye html5shiv. Para la tranquilidad del lector, estas librerías ya se encuentran activas de manera predeterminada en la descarga de Modernizr, por lo que realmente no tenemos que hacer mucho.

De todos modos, en la página de descarga podemos fijarnos que esté seleccionada html5shiv, que se encuentra en el recuadro "Extra".

¡Así de sencillo! Con esto habremos descargado Modernizr y al ponerlo en marcha en una página web tendremos automáticamente soporte a las etiquetas de HTML5, cuando de manera nativa no estén disponibles en nuestro navegador.

Nota: Puedes leer el artículo Primeros pasos con Modernizr para aprender a cargar las librerías en una página web, aunque es básicamente incluir el script Javascript que acabas de descargar.

Conclusión

Con este proyecto, cualquier sitio web realizado con las etiquetas nuevas en HTML5 podrá verse de manera correcta en todos los navegadores. Se trata de un script muy sencillo de usar, que nos evitará la pregunta típica que algunos nos hacemos todavía: ¿desarrollo pensando en HTML5 o no?

La verdad es que scripts como este nos solucionarán dudas y más que un quebradero de cabeza cuando estamos dando nuestros primeros pasos en HTML5.

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

nico

01/7/2012
Muy bueno
Gracias por el dato.
Lo probé y quedé sorprendido por lo bien que funciona (en IE8).

midesweb

13/7/2012
Y lo sencillo que es!
Me alegro que le sacases partido! ya no es escusa trabajar con la marcación en HTML5!

Daniel

09/7/2013
se copia y pega solamente?
veo que se ve como un comentario, asi mismo lo debo pegar en mi codigo?
en mi web tengo el proble que un link se pinta de azul a pesar de haber hecho todo para quitarlo, vale señalar q solo me pasa en internet explorer