Elementos do HTML5 funcionando no IE (6, 7, 8)

Aproveitando o tempo entre uma demana e outra comecei a estudar mais HTML 5 e a fazer uns testes de código, afinal ler não basta – pra ser ninja tem que aprender fazendo.

Um problema do uso das novas tags no Internet Explorer: como as tags "não existem" para o IE ele não permite que você estilize elas, o que impossibilitaria o uso correto de alguns elementos semânticos do HTML, afinal colocar um <article> e ter que usar uma <div> dentro para estilizar não faz sentido nenhum e suja o código sem necessidade.

Este seria um impedimento para passar a utilizar HTML 5 nos site se não fosse um work-arround que "força" o Internet Explorer a reconhecer estes novos elementos, assim eles passam a ser estilizados por qualquer CSS que você tenha atribuído a eles.

A gambiarra para que tudo fique ok é utilizar o javascript para criar estes elementos no seu documento, uma vez que eles tenham sido criados pelo javascript eles existem no seu DOM – e passam a ser estilizados.

Estilizando HTML 5 no Internet Explorer

Insira o código abaixo no <head> da sua página e toda a estilização dos elementos da lista abaixo deverá funcionar:

<!--[if IE]>
<script type="text/javascript">
document.createElement("article");
document.createElement("nav");
document.createElement("section");
document.createElement("header");
document.createElement("aside");
document.createElement("figure");
document.createElement("legend");
document.createElement("footer");
</script>
<![endif] -->

 

Pronto, agora você já pode adaptar seus htmls utilizando as novas tags do html5 sem nenhum "prejuízo" para o tempo de desenvolvimento, melhorando a semântica do seu código.

Com o HTML alterado é só mudar o CSS e começar para aplicar as classes e estilos nos novos elementos. Recomendo que você leia sobre CSS Orientado a Objetos – apesar do nome polêmico a apresentação de slides mostra uma metodologia bacana que ajuda a economizar código e facilita bastante alterações no CSS.

Acredito que em breve isso será importante para os buscadores, que possivelmente irão "ler" melhor o conteúdo da internet devido a esta segmentação e descrição mais detalhada de cada parte do conteúdo.

Dúvidas, críticas e sugestões nos comentários! 🙂

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *