Cómo hacer funcionar HTML5 en Internet Explorer 7&8

Adrián Somoza • 3 de Octubre del 2013 • Buenos Aires, ARG.

Como siempre, Internet Explorer es un caso aparte. En este post vamos a enseñarle a leer HTML5.

Para el que está apurado y simplemente quiere sacarse de encima el problema, la solución tiene dos pasos:

  1. Incluir el siguiente código dentro del head de cada archivo de HTML5:
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    < ![endif]-->
  2. Incluir el siguiente código en el CSS:
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
        display: block;
    }
    

El secreto del truco (para el que quiera entenderlo):

El problema con Internet Explorer 8 y otros navegadores obsoletos es que fueron creados cuando todavía no existía ninguno de los tags de HTML5, y por lo tanto son incapaces de interpretarlos. Para solucionar este problema, habría que “enseñarle” al navegador a interpretar cada uno de los nuevos tags de HTML5 que usemos en nuestro sitio. Esto lo logramos agregando un poco de JavaScript para crear los elementos, de la siguiente manera:

<script>
  document.createElement('header');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('footer');
</script>

Y así sucesivamente...                

Pero esta no es la mejor solución porque se volvería tedioso agregar algún elemento que nos hayamos olvidado, ya que habría que editar cada archivo de HTML5.

La mejor solución es incluir un archivo de JavaScript (JS) para todos los elementos de HTML5 posibles. Remy Sharp creó un archivo que hace justamente esto, y lo subió a Google code. Para evitar que las versiones más actuales de Internet Explorer se vean innecesariamente obligadas a leer este archivo, incluimos el condicional <!--[if lt IE 9]> que significa “if lower than Internet Explorer 9”, es decir, “si la versión de Internet Explorer es menor a 9”. De esa manera, no molestamos a los navegadores más actuales que ya saben leer HTML5.

En cuanto al código de CSS, lo que hace es obligar a Internet Explorer a que interprete los elementos creados con JS, como bloques, ya que no lo hace por default.

Último pero no menos importante, algunos memes para hacer catarsis:

“¿Te gustaría hacer de Internet Explorer tu navegador predeterminado?”

Cada vez que abro accidentalmente Internet Explorer

“¡Escuché que usa Internet Explorer!”

comments powered by Disqus

Para enterarte cuándo posteo en este blog, seguime en Facebook o en Twitter.

Hablemos

Manufacturado en Buenos Aires.