CSS e JavaScript hack para fazer o HTML5 funcionar

CSS e JavaScript hack para fazer o HTML5 funcionar

Sábado, 30 de Janeiro de 2010 às 16:46

Infelizmente nenhum dos maiores navegadores atuais suportam TODAS as novas tags inseridas no HTML5, como: article; section, header, hgroup, etc. ( Mas não demorará muito para suportarem ... )

Então é necessário simular estas tags com a ajuda de hacks em CSS e JavaScript. Basicamente para estas tags, a única coisa que você precisa fazer é setá-las como display:block. Veja abaixo um exemplo de css hack para aticle, footer, section e header:

<style type="text/css">
article, footer, section, header {
display:block
}
</style>


Simples assim. Primeiramente, nós adicionamos as tags que não são suportadas pelos navegadores, então setamos os atributos display para block.

JavaScript Hack

O hack de CSS é realmente bem simples, mas infelizmente não funciona em todos os navegadores, como por exemplo o Internet Explorer. Para solucionar este problema também no IE, precisamos criar também um hack em JavaScript.

Vamos ao código:

<script>
(function () {
var elements = [
'article', 'content', 'footer', 'header', 'nav', 'section'
];

for (var i = 0, j = elements.length; i < j; i++) {
document.createElement(elements[i]);
}
})();
</script>


Note que o código acima deve ser adicionado logo abaixo às tags <link> e <style>. Caso contrário, não irá funcionar.

Basicamente é isto, agora você pode utilizar o HTML5 em todos os principais browsers.

Qual a sua opinião?

Comente e interaja!



3 Comentários!

#1
Kennedy | Segunda-Feira, 31 de Maio de 2010 às 21:55

Realmente

É gambiarra. Não é aconselhável. Mas não deixa de ser interessante o Artigo. Os bons programadores não usam destes artifícios. É melhor esperar o HTML5 chegar direitinho!
Denunciar
#2
Pablo | Domingo, 30 de Maio de 2010 às 16:52

Gambiarra

Estou percebendo que a quantidade de gambiarra vai é aumentar com essa história de html5 ... hehehe .. só quem vive o dia dia sabe do que estou falando!
Denunciar
#3
Sergio Ricardo | Quinta-Feira, 27 de Maio de 2010 às 16:01

Não funcionou

Muito boa as explicações sobre HTML5, parabéns. Mas pra mim não funcionou o hack. Preciso incluir vídeos nas páginas,no Mozilla, Chrome funcionaram, mas no IE, nada de HTML5 funciona, nem com este código. Você poderia me dar uma dica?
Denunciar