Cómo Hacer Qué...

Cómo Hacer que IE8 (y/o menor) soporte HTML5

Hoy estreno esta sección que espero les sea de ayuda. Hace unos días me topé con la necesidad de hacer qué un sitio web fuera compatible con IE8-7, por lo que me gustaría compartir cómo fué que llegué a esta solución.

Internet Explorer ha sido desde hace tiempo el navegador que más canas verdes ha sacado a diseñadores y desarrolladores web (me incluyo). Afortundamente, apartir de IE9 se han visto mejorías y ha salvado a muchos colegas de una crisis nerviosa.

Por otro lado, desafortunadamente, aun hay proyectos que requieren un sitio web cuya estructura de las páginas sea en HTML5 y que a la vez, sean compatibles con IE8 y si es posbie, con 7 y 6.

Elementos HTML5

HTML5 ofrece elementos nuevos que ayudan a la semántica del sitio web, por ejemplo, el elemento <header> que ayuda al navegador a detectar el encabezado de la página.

IE8 no sabe de la existenca de estos elementos, por lo cuál, no reconocerá los estilos aplicados a los mismos a través de CSS. En fin, basta de charla y vayamos al asunto en cuestión.

Comentarios Condicionales (Conditional Comments)

Primero hay que “detectar” cuando el usuario esté utilizando navegadores menores a la versión 9 de IE, esto se logra a través de colocar comentarios condicionales (conditional comments) en la parte superior del documento:

<!--[if lt IE 9]>
<![endif]-->

Con esto, prácticamente estamos indicando que cuando el usuario esté utilizando versiones 8,7 o 6 de IE, se aplique algun código en particular, que es justamente lo que haremos a continuación.

Solución 1: Creando elementos faltantes con Javascript

Existe una forma sencilla de arreglar este problema con Javascript, esto es creando los elementos faltantes en el DOM de la página:


<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside';
document.createElement('footer');
</script>
<![endif]-->

Obviamente no tienes que crear cada elemento HTML5, sólo aquellos que necesites.

Solución 2: Utilizando HTML5Shiv

Es básicamente lo mismo que la solución anterior, sin embargo, es a través de un código (tambien en js) desarrollado por Alexander Farkas, Jonathan Neal y Paul Irish. Es aun más sencillo y recomendable.

Basta con jalarlo de la librería de google y pegarlo dentro del comentario condicional que habíamos en creado en lugar del código en js que ya se había escrito, quedaria algo asi:


<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Nota Importante: ¡No olvides el CSS!

IE8 no reconoce a estos elementos como bloques, por lo que habrá que hacerlo manualmente en el archivo CSS :

header, nav, section, article, aside, footer {
display:block;
}
¡Sé social!Share on Google+Tweet about this on TwitterShare on LinkedInShare on FacebookEmail this to someone

Un pensamiento sobre “Cómo Hacer que IE8 (y/o menor) soporte HTML5”

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>