O teste é simples, vamos em quase todos os testes utilizar o método document.createElement() do javascript para elementos do HTML 5. Logo em seguida vamos testar atributos e/ou propriedades dos mesmos elementos. Assim vamos verificar se o elemento é ou não suportado em determinado browser.
Com a chegada – bem devagar – do HTML 5 e a exigência cada vez maior para criação de interfaces crossbrowsers, precisamos adequar e adaptar nossos projetos a situações diversas.
Não podemos, por outro lado, deixar de inovar. É interessante podermos utilizar uma tag <video>, por exemplo. Canvas é também muito interessante, mas o suporte ainda não é tão amplo.
Vamos aos testes:
Canvas
var teste = document.createElement("canvas");
var checar = ( teste.getContext ) ? true : false;
alert(checar);O teste foi simples: criamos um elemento canvas, já deixamos ele apontado em uma variável que indica o teste, logo em seguida vemos se ele da suporte ao método getContext, suportado pelo elemento Canvas do HTML5. Você pode ver um resultado no link: http://jsbin.com/ogizo3/2/edit
Audio e Vídeo
var testeAudio = document.createElement("audio");
var testeVideo = document.createElement("video");
alert( testeAudio.play );
alert( testeVideo.play );Agora fizemos o mesmo tipo de teste, porém testamos com um método que há nos 2 elementos – audio e video – em html 5: play(). Pra ver como está ficando nossa página de testes: http://jsbin.com/ogizo3/3/edit
Novos inputs do HTML 5
O html 5 tem vários novos inputs bem interessantes. Temos uma lista de vários novos tipos como date, datetime, range e number, por exemplo.
Independente do tipo de input o teste é simples:
var testeInputDate = document.createElement("input");
testeInputDate.setAttribute("type", "date");
alert( testeInputDate.type == "date" );var testeInputDatetime = document.createElement("input");
testeInputDatetime.setAttribute("type", "datetime");
alert( testeInputDatetime.type == "datetime" );var testeInputRange = document.createElement("input");
testeInputRange.setAttribute("type", "range");
alert( testeInputRange.type == "range" );var testeInputNumber = document.createElement("input");
testeInputNumber.setAttribute("type", "number");
alert( testeInputNumber.type == "number" );Se o navegador não aceitar o tipo apontado no método setAttribute, o retorno de seu tipo será normalmente text.
Enquanto isso temos mais informações na nossa página de testes: http://jsbin.com/ogizo3/4/edit
Adicionando suporte a outros elementos HTML 5 até com IE6
Agora um pequeno truque já bastante utilizado na web (inclusive nesse site).
Podemos utilizar o .createElement() para criar elementos com várias tags diferentes em nossas páginas, entre elas, elementos de bloco como nav, header, footer, section, article, aside etc.
Pra isso vamos fazer uma pequena chamada no Javascript e no CSS, considerando cada tag que vamos criar:
document.createElement('nav');E no CSS uma pequena declaração:
Pronto. Com esse hack super simples temos um elemento nav funcionando inclusive em Internet Explorer 6!
Claro que já existem códigos robustamente preparados, então indico usar, por exemplo, o que o próprio JSBin.com indica:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
e no início de nosso css:
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }Não vamos ter nenhum recurso expecial, mas já vamos poder usar essas novas tags do HTML 5 em nossos documentos bem menos preocupados – nem frustrados – com o suporte crossbrowser.
