Cómo hacer que los estilos HTML5 funcionen en IE
(Ninguna valoración todavía)
Cargando...Las versiones antiguas de IE no reconocen los elementos de HTML5 por lo que no aplican los estilos adecuados, en este artículo te explicamos como lograrlo.
HTML5 es una de las más grandes tecnologías desarrolladas recientemente, pero algunos navegadores no tienen un soporte nativo hacia los nuevos elementos semánticos que propone este estándar, por lo que puede ser difícil convencer a tus clientes o empleadores, de que aplicarlo a tu código es una buena opción.
Los lista de navegadores problemáticos esta encabezada por Internet Explorer 8 y versiones anteriores. Desafortunadamente Internet Explorer sigue siendo uno de los navegadores más utilizados en la actualidad, debido a que se instala por defecto al utilizar un sistema operativo Windows, uno de los más populares en el mundo.
En esta ocasión, trataremos de encontrar una solución al problema del despliegue de elementos de HTML5 en este tipo de navegadores, por un momento nos olvidaremos de funcionalidades geniales que nos proporciona el nuevo estándar, como por ejemplo el control total del elemento video, y nos enfocaremos simplemente en tratar de que los elementos se presenten de manera similar en estos navegadores problemáticos.
IE no cree en los elementos HTML5
Si asumimos que va a pasar un largo tiempo antes de que la mayoría de los navegadores intenten implementar la mayoría de los elementos de HTML5, lo cual es bastante probable, necesitamos empezar a pensar en una forma de crear y desplegar los componentes de HTML5 en los navegadores de uso común actual. Al utilizar herramientas como JavaScript y CSS podemos lograr simular este proceso; sin embargo, hay un problema con este métodos, Internet Explorer no sabe cómo representar el CSS de elementos que no reconoce.
En pocas palabras, Internet Explorer ni siquiera ve los elementos de HTML5, así que mucho menos puede aplicarles algún tipo de estilo.
Este tipo de problema ya se había presentando anteriormente con otras funcionalidades distintas a HTML5, como por ejemplo el elemento “abbr”, el cual no podía recibir un estilo en IE6, lo que llevo a varios desarrolladores a buscar distintos tipos de soluciones para el problema.
La solución
Existe un truco que te permite implementar elementos HTML5 en tu código, y que estos sean identificados por Internet Explorer y por lo tanto puedan recibir algún tipo de estilo. La solución consiste en crear el nuevo elemento mediante JavaScript, de la siguiente manera:
document.createElement('header');
Por ejemplo si quisieras estilizar un elemento de tipo time en tu página, para que el texto se muestre de forma itálica, normalmente sólo bastaría con realizar lo siguiente:
<head> <title>Header HTML5</title> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20time%20%7B%20font-style%3A%20italic%3B%20%7D%0A%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> </head> <body> <time datetime="2013-10-26">Mi Cumpleaños</time> </body>
Pero antes de adaptar el fix, en IE este elemento lucirá sin ningún tipo de estilo. Para aplicar dicha solución, basta con agregar la línea indicada en el código.
<head>
<title>Header HTML5</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20time%20%7B%20font-style%3A%20italic%3B%20%7D%0A%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<!-- Añade esta línea -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3Edocument.createElement('time')%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<time datetime="2013-10-26">Mi Cumpleaños</time>
</body>
Después de esto, nuestro elemento time lucirá con estilo al desplegarse en el navegador Internet Explorer.
El crear todos elementos de HTML5 mediante JavaScript puede resultar bastante tedioso, si no quieres realizar esto manualmente, puedes descargar alguno de los scripts que ya existen en Internet para crear todos estos elementos.
Condiciones y observaciones
Hay un par de cosas que debemos tener en cuenta cuando se utilizamos este tipo de solución para estilizar los elementos HTML5. La primera de ellas es que se requiere tener JavaScript habilitado.
Obviamente, esto significa que su diseño ahora depende de JavaScript. Si has utilizado elementos semánticos en tu sitio y los elementos no pueden recibir un estilo, el contenido sigue siendo totalmente legible, por lo que si esto no te molesta puedes seguir sin utilizar este tipo de fix y evitar que el diseño sea manejado por un lenguaje de scripts. El contenido no será perfecto, pero el usuario podrá continuar con sus operaciones.
Una observación que queremos establecer, es que si creas un nuevo elemento y no utilizas la etiqueta body, lo que es perfectamente válido en HTML5, IE pondrá todos los elementos creados dentro de la etiqueta head. Algo que puede traer muchos problemas, pero que puede ser evitado de manera sencilla, simplemente utilizando ambos elementos dentro de tu código.
Reset CSS para HTML5
Jugando un poco con CSS3 y HTML5 he encontrado este reset CSS para HTML5, muy útil para lograr la tan ansiada compatibilidad entre navegadores.
Este reset, a parte de lo que hacen los reset más tradicionales, como el famoso de Eric Meyer (en el cual se basa), incluye etiquetas de HTML5 para asegurarnos de maximizar el soporte de este lenguaje en diferentes navegadores.
Con el reset le quitamos margins y paddins a cosas que no deben tenerlo, quitamos estilos de fuente, tamaños por defecto, y en particular, lo que me parece muy útil de este reset CSS es darle a ciertas etiquetas HTML5 estructura de bloque (display: block), porque de hecho, deben tenerla, pero hay navegadores antiguos que no las reconocen y por tanto, necesitan de estas reglas para funcionar correctamente:
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
Sin este tipo de recursos resulta complicado maquetar en HTML5, y casi imposible hacer que los diferentes navegadores rendericen correctamente nuestros diseños.
Por otro lado, ya han salido algunas librerías javascript interesantes para lograr el renderizado correcto de HTML5, como modernizr. Modernizr añade clases CSS a los elementos HTML5 para que puedas definir estilos específicos en función del navegador.
Y para aquellos que os preguntéis porqué molestarse en maquetar en HTML5, aquí os dejo un enlace a una web con ejemplos de lo que se puede hacer en HTML5.
Enlace: reset CSS para HTML5.
3 respuestas
Gracias por tu respuesta. Saludos
Nos estamos refiriendo en concreto a html5shiv, si estás interesado lo puedes descargar de este enlace http://code.google.com/p/html5shiv/.
Saludos
Hola Daniel, muy interesante tu artículo. Te quería preguntar si a los scripts para paliar el problema que expones, te refieres a Modernizr y en concreto a HTML5shiv. Yo creo que esto funciona muy bien y resuelve el problema de IE. ¿Cuál es tu opinión?. Saludos y gracias por tus buenos artículos.