Linguagens para Internet

Linguagens Web

Como saber se o navegador suporta HTML 5

Olá, hoje vamos descobrir como saber se o navegador suporta HTML 5. Para isso, iremos desenvolver um simples script usando javascript.

O HTML5 facilitou muito a vida dos desenvolvedores, mas a falta de padrão dos browsers e a insistência de usuários no que tange a atualização de seus navegadores, dificulta o desenvolvimento nessa linguagem.

Caso queira aprender mais sobre HTML 5 acesse o link e atualize seus conhecimentos. Saiba mais sobre HTML 5

O propósito deste artigo não é ensinar a resolver o problema de compatibilidade, e sim mostrar como saber se o navegador suporta HTML 5. Ao construir uma página você pode precisar usar algumas tags HTML 5, mas se o navegador do usuário não suportar HTML 5, você terá que direcioná-lo para um outro bloco de conteúdo.

Afinal, como saber se o navegador suporta HTML 5?

Usaremos o DOM (Document Object Model) para construir dinamicamente uma tag do HTML 5. Em seguida, usaremos uma propriedade desta tag para testar se existe. Caso exista, o navegador suporta o HTML 5, e caso não exista o navegador é antigo e não há suporte.

Vamos testar com o código?

1
2
3
4
5
6
7
<script type="text/javascript">
   var e = document.createElement("video")
   if(e.play)
   alert("navegador suporta HTML 5")
   else
   alert("Navegador antigo, sem suporte a HTML 5")
</script>

No primeiro teste, executei o código com o Internet Explorer 8.0, veja o resultado na imagem abaixo:

Como saber se o navegador suporta HTML 5

Imagem 1 – Internet Explorer 8.0 – Não suporta HTML 5

 

Como você percebeu, o internet explorer 8.0 não suporta HTML 5 e, como você não sabe qual o navegador do usuário terá que resolver o problema de outra forma. De repente, se o objetivo for exibir um vídeo, poderá usar flash.

No código anterior testamos o suporte do browser com a criação da tag video

1
2
3
4
5
6
7
<script type="text/javascript">
   var e = document.createElement("canvas");
   if(e.getContext)
   alert("navegador suporta HTML 5")
   else
   alert("Navegador antigo, sem suporte a HTML 5")
</script>
Como saber se o navegador suporta HTML 5

Imagem 2 – Navegador Opera 12.15 – Suporta HTML 5

No segundo teste, agora com o Opera, um navegador mais atual, a resposta do script foi boa, o suporte existe e a tag video vai ser interpretada.

Veja o script em funcionamento. Teste o seu navegador.

Dessa forma descobrimos como saber se o navegador suporta HTML 5, agora é só usar a criatividade ao desenvolver para vários navegadores.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>