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.
1 comentarios, 0 referencias
+
#