2011-10-28

Usar etiquetas html5 en browsers antiguos

Es posible usar las nuevas etiquetas HTML5 (header, section, hgroup) en browsers antiguos, tales como Internet Explorer 8 y anteriores, mediante el siguiente truco.

1.- Las nuevas etiquetas HTML5 no reconocidas se muestran como si fueran "inline", cuando en realidad deben ser mostradas por el browser en modo "block". Esto es fácil de solucionar con una hoja de estilo especial que incluya las etiquetas HTML5 no reconocidas y las ponga en modo "block".

(fichero ie.css)
header, section, hgroup {
    display: block;
}


2.- El segundo problema surge cuando Internet Explorer no aplica estilos sobre etiquetas no reconocidas. Sin embargo podemos hacer que las "reconozca" mediante un javascript en la cabecera que "defina" esas etiquetas nuevas.

(fichero ie.js)
document.createElement('header');
document.createElement('section');
document.createElement('hgroup');



Finalmente podemos cargar estos nuevos elementos, la hoja de estilo y el fichero javascript, usando otro truco más, esta vez uno própio de Internet Explorer, que no permite, mediante unos comentarios HTML especiales, detectar si la página es ejecutada por un browser Internet Explorer inferior al 9.

<!--[if lt IE 9]>
  <script type="text/javascript" src="ie.js"></script>
  <link rel="stylesheet" href="ie.css" />
<![endif]-->



Por supuesto, también es posible usar directamente html5shiv, que básicamente hace esto mismo.

Facil, ¿verdad?


No hay comentarios:

Publicar un comentario