HTML5 no IE (inclusive 6)

Por influência do meu amigo Alvaro (vulgo AJ) comecei a testar algumas marcações do HTML5 em meus layouts. Posso confirmar, que agora as marcações fazem muito mais sentido, mas esses sentidos se perdem em alguns navegadores (aposto que você já sabe o nome, inclusive ouviu um coro gospel norte-americano cantando: “IIIIIEEEE”).

Procurando uma forma de “burlar” esta incompatibilidade me deparei com alguns resultados, e apresento aqui uma versão resumida.

Mas antes vamos dar uma olhada na diferença de interpretação de cada navegador (Chrome 13, Firefox 5 e o “moderno” Internet Explorer 9):

  
Não liguem para a falta de acentuação, ainda não “refinei” o código.

Neste layout utilizei o básico do HTML5, como as tags <header>, <footer> e <nav>. Como pode ser visto, em todos os navegadores (exceto o IE), o browser interpretou corretamente as marcações e os estilos aplicados via CSS, enquanto que o IE ignorou completamente as marcações.

Para resolver o problema recorri a um JavaScript simples, que “adiciona” o suporte às novas marcações do HTML5:

<SCRIPT>
if(navigator.appName == "Microsoft Internet Explorer"){
	document.createElement("article");
	document.createElement("footer");
	document.createElement("header");
	document.createElement("hgroup");
	document.createElement("nav");
}
</SCRIPT>

O funcionamento é bem simples, primeiramente é feita uma verificação do navegador que está sendo utilizado, através da função navigator.appName. Caso o resultado seja verdadeiro, a função document.createElement cria as marcações necessárias para que o IE interprete corretamente.

Então é isso, deixe-me voltar aos meus códigos…