Utilizando o HTML5Shiv Para Reconhecer Tags do HTML5

Com a especificação do HTML5 surge 30 novas tags e ainda deve surgir outras.  Dentre essas tags temos tags estruturais, como <header>, <footer>, <section>, <nav>, <article>, como também tags que foram criadas para melhorar a semântica do código que escrevemos, como <figure> para agrupar tipos de midia, como imagem ou vídeo.

Porém, existe alguns navegadores que não reconhecem esses novos elementos como o Internet Explorer 8 e anteriores, ai surge a questão:

– Como fazer para o Internet Explorer reconhecer as tags do HTML5?

A resposta e simples, você pode criar o elemento utilizando Javascript, para isso utilize o código abaixo:

[code language=”javascript”]

<script>document.createElement("header")</script>
[/code]

Com isso os Internet Explorer 8 e anteriores reconhecem o elemento, com o elemento criado você pode estilizar ele utilizando CSS.

[code language=”html”]

header {color:red;}
[/code]

É claro que você não vai utilizar esse script para cada elemento novo do HTML5, para isso foi criado o HTML5Shiv.

HTML5Shiv

O script HTML5Shiv foi criado por Remy Sharp para fazer com que os navegadores que não reconheçam as novas tags, passem a reconhecer os novos elementos do HTML5. Para utiliza-lo basta baixar o script ou se preferir você pode chamar ele utilizando o codigo abaixo dentro da sua tag <head>:

[code language=”javascript”]
<!–[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
[/code]

O codigo é um script condicional, diz que se for um Internet Explorer anterior a versao 9 ele ira carregar o HTML5Shiv que esta hospedado no Google Code.

Conclusão

Falei do Internet Explorer 8 e anteriores, mas o Firefox 2 também não reconhece as novas tags, para ele e qualquer outro navegador que não reconheça, pode ser utilizado oHTML5Shiv.
Atualmente o HTML5Shiv esta incluido na biblioteca Modernizr, mas isso e assunto para um proximo post…

Referências

Google Code do HTML5Shiv

HTML5 Shiv por John Resign

HTML5 enabling script

The Story of the HTML5 Shiv

How to get HTML5 working in IE and Firefox 2

Deixe uma resposta

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