comparte el articulo 

Cómo hacer que los estilos a HTML5 funcionen en IE

Actualizado el 07/11/2013 < > 3 Cometarios

Resumen: 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>
  <style>
  time { font-style: italic; }
  </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>
  <style>
  time { font-style: italic; }
  </style>
  
  <!-- Añade esta línea -->
  <script>document.createElement('time');</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.

Publicado el 28/10/2013, última actualización 07/11/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

3 Cometarios

  1. Luis Alfonso

    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.

    Lunes, 28 de octubre 2013

  2. Daniel Ernesto Navarro Herrera

    Nos estamos refiriendo en concreto a html5shiv, si estás interesado lo puedes descargar de este enlace http://code.google.com/p/html5shiv/.

    Saludos

    Miércoles, 30 de octubre 2013

  3. Luis Alfonso

    Gracias por tu respuesta. Saludos

    Jueves, 31 de octubre 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras