Contenido

Disfruta de HTML5 en Internet Explorer y Firefox 2

30 Jun

+ 1

Aunque el HTML5 está lejos, la gente ya está empezando a desarrollar cosillas usando sus nuevas capacidades. Y es que cada vez más los navegadores lo están adoptando, aunque aún es muy pronto para poder usarlo libremente sin preocuparnos de navegadores menos modernizados (IE8 e inferiores, Firefox 2,…).

Internet Explorer no le aplica estilos a elementos HTML5

Una de las peculiaridades de Internet Explorer es que si no reconoce el tag HTML que estamos usando no nos permite que le apliquemos estilos:

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

El resultado obtenido, nos mostará un texto sin rastros de cursivas. Esto lo podemos solventar con Sjoerd Visscher publicó hace menos de un año y que John Resig nos explica en este artículo.

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>
  <script>document.createElement('time');</script>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

Misteriosamente, el texto aparecerá en cursiva. Por este motivo, y para permitirnos darle estilos en IE a los elementos HTML5 disponemos de un sencillo Javascript que nos generará cada uno de los elementos HTML usando el sistema anterior mediante Javascript.

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()

Tan sencillo como insertarlo en un fichero javascript e incluir este código en nuestro <head></head>:

<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->

Conclusiones

Por desgracia, implica que el Javascript es una tecnología requerida para aplicarle estilos a estos nuevos tags. Así que hemos de ser conscientes de ello.

Problema de renderizado en Gecko 1.9b5(Firefox 2, Camino)

Aunque son solo el 3% de los usuarios de Internet que aún están usando Firefox 2, este problema no es despreciable.

Y es que los navegadores basados en Gecko 1.9b5 (o inferiores) tienen un problema a la hora de renderizar elemento de bloque, por ejemplo, si tenemos HTML:

<body>
  <header><h1>Title</h1></header>
  <article><p>...</p></article>
</body>

Gecko, nos lo transforma en algo similar a esto:

<body>
  <header></header>
  <h1>Title</h1>
  <article></article>
  <p>...</p>
</body>

Siendo el resultado muy similar al que produciría Internet Explorer sin Javascript en el ejemplo anterior.

Soluciones

Podemos usar una técnica basada en Javascript que Simon Pieters nos ofrece, o servir XHTML en lugar HTML al navegador:

// HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

// HTACCESS
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

// PHP
if (preg_match('/rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
    header('Content-type: application/xhtml+xml');
}

Esto hará más sensibles las páginas web y necesitarán que los tags estén correctamente cerrados ya que pasará a tratarlo como si de XML se tratara.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.