HTML5 Shiv (o Shim) es un hack necesario para poder utilizar los nuevos elementos semánticos de HTML5 (header, footer, article, etc ) en IE8 y anteriores. Vamos a ver en detalle cual es el problema y cómo se soluciona.
Internet Explorer ignora las nuevas etiquetas
El problema es que al utilizar las nuevas etiquetas para estructurar una página web, la presentación final va a depender totalmente de los estilos que apliquemos a esas etiquetas. El Internet Explorer ( versión 8 y anteriores ) no aplica los estilos a las etiquetas nuevas porque no las reconoce. Ignora las etiquetas y los estilos asociados.
Si hemos creado un documento utilizando, por ejemplo:
…My Great Web Header …
y los correspondientes estilos en CSS:
header {
border: 1px solid black;
background-color: wheat;
font-size: 160%;
padding: 10px;
}
Lo que esperamos ver es algo así:
Lo que verán los visitantes que utilicen el IE8 o inferior es:
Esto evidentemente nos obliga a buscar alguna solución si tenemos que dar soporte a estos navegadores y queremos utilizar las etiquetas nuevas. Esta solución es lo que se ha llamado HTML5 Shiv.
La solución para que IE aplique CSS
Afortunadamente alguien descubrió un hack muy sencillo que permite aplicar reglas CSS a elementos que el IE no reconoce. Sólo tenemos que crear explícitamente el elemento con document.createElement( elemento ).
Es decir, que bastaría con crear los elementos que vayamos a usar en la cabecera de nuestro documento:
<!DOCTYPE html>
<html lang="es">
<head>
Ejemplo de HTML5 Shiv
</head>
...
Como es un código de uso habitual y que sólamente necesitamos ejecutar cuando la página se cargue en un IE6, IE7 o IE8, lo mejor es separarlo en un fichero externo y cargarlo de forma condicional para IE<9 :
Es necesario colocarlo en la cabecera porque el Internet Explorer necesita reconocer los elementos para poder presentarlos.
Hay que tener en cuenta también que, por defecto, estos elementos nuevos para el IE van a ser elementos de línea. Si queremos que sean elementos de bloque ( en la mayoría de los casos es lo normal ) tenemos que darles este estilo explícitamente en nuestro CSS:
header,nav,article,footer,
section,aside,figure,figcaption{display:block}
Utiliza el script ‘oficial’
El script html5shiv.js mantenido en GitHub por Alexander Farkas se ha convertido en el estándar de facto para utilizar los elementos de HTML5 en Internet Explorer anteriores al IE9.
Es recomendable utilizarlo porque soluciona otros problemas relacionados que se han ido encontrando con el tiempo ( problemas al imprimir y al manejar dinámicamente las etiquetas con innerHTML ).
Si sólamente necesitas dar estilo a los elementos, el código que hemos descrito antes puede servirte, pero utilizando el script html5shiv.js sabes que tienes cubiertos todos los problemas relacionados que se han encontrado hasta ahora y que ha sido probado por muchos miles de personas. Estas son las ventajas del software libre y de la colaboración.
Nota: Este script viene también incluido en la popular librería Modernizr, no es necesario incluirlo a parte.
Fuentes:
HTML5 Shiv
The Story of the HTML5 Shiv
No hay comentarios:
Publicar un comentario