Hoje em dia, muito tem se falado de desenvolvimento com HTML5 e sem dúvida, é um caminho a ser seguido sempre que possível. O problema quando falamos de HTML5 é que sempre nos perguntamos quando poderemos usar os recursos com segurança, já que não temos como garantir que todos os navegadores terão suporte a HTML5. A primeira cois aque precisamos entender é que perguntar se um browser tem suporte à HTML5 não quer dizer absolutamente nada. O HTML5 é na verdade um conjunto de características distintas. Então você não pode detectar “suporte à HTML5”, porque isso não faz qualquer sentido. Mas você pode detectar o suporte aos recursos como canvas, geolocalização, vídeo ou audio.

img-html5-defination

Modernizr

É aí que você precisa conhecer este maravilhoso framework javascript que detecta o suporte para muitas funcionalidades de HTML5 e CSS3. Para usá-lo, não é preciso mais do que incluir o script no <head> de sua página.

<script src="modernizr.min.js"></script>

O script roda automaticamente e assim que é executado, ele cria um objeto global chamada Modernizr, que contém um conjunto de propriedades booleanas para cada recurso que você pode testar para garantir que algum recurso que você planejou utilizar vai estar disponível no browser. Por exemplo, se você deseja utilizar a TAG <video> no seu site, basta testar se a propriedade Modernizr.video. Se o seu navegador não suporta a TAG, a propriedade Modernizr.video será “false”. Com base nestes testes, você pode garantir o perfeito funcionamento do seu site, programando as variações de acordo com os recursos disponíveis do browser. Neste caso, por exemplo, se você descobriu que o browser não suporta a TAG <video>, você pode implementar uma forma alternativa usando um player flash.

 

Modernizr 2 Logo

Alguns recursos podem ser um pouco mais complexos e apresentar informações extras. Vejamos novamente o exemplo do vídeo. Além de saber se existe o suporte ao vídeo, há diferentes formatos suportados para diferentes browsers e há uma propriedade para cada uma delas como podemos ver abaixo.

if (Modernizr.video) {  
    // Consegue tocar o video, Mas de que tipo?  
    if (Modernizr.video.webm) {    
	// tente WebM  
    } else if (Modernizr.video.ogg) {    
	// tente Ogg Theora   
    } else if (Modernizr.video.h264) {    
	// tente H.264 
    }
}

Podemos reduzir muito a complexidade do nosso código para “detectar” os recursos do HTML5 usando o Modernizr. Podemos testar vários recursos como: Canvas, Video, LocalStorage, WebWorkers, Geolocation ou mesmo sobre os InputTypes de formulários. Você pode encontrar outras informações e exemplos neste link.