Chegado a este ponto no Manual de Modernizr seguramente estaremos interessados em começar a utilizar as bibliotecas para detectar a compatibilidade com CSS3 e HTML5 ou dito de outra maneira, colocar as mãos no código fonte para começar a entender realmente como funciona Modernizr.

No capítulo anterior explicamos os primeiros passos para incluir as bibliotecas em uma página web. Assim que agora podemos começar a usar Modernizr. O que vamos fazer a continuação é basicamente um primeiro script Javascript que acesse o objeto Modernizr e nos diga se estão ou não presentes algumas funcionalidades no nosso navegador.

Objeto Javascript Modernizr

Quando temos Modernizr carregado em nossa página, se cria automaticamente um objeto Javascript que possui uma série de propriedades que nos informam se estão ou não disponíveis cada uma das funcionalidades presentes em CSS3 e HTML5. As mencionadas propriedades contêm simplesmente valores booleanos (verdadeiro ou falso) que podemos avaliar para saber se estão ou não cada uma das funcionalidades que desejemos detectar.

O uso é tão simples como isto:

if (Modernizr.boxshadow){
   alert("SIM sombra caixa");
}
else{
   alert("NAO sombra caixa");
}

Como vimos, se está avaliando Modernizr.boxshadow (a propriedade boxshadow do objeto Modernizr) e estamos mostrando uma mensagem em caso positivo e outro em caso negativo.

A propriedade boxshadow nos indica se o navegador é compatível com o atributo box-shadow de CSS3, que serve para criar caixas de conteúdo com sombreado.

Agora, vamos ver outro exemplo similar que detectaria se o elemento Canvas do HTML 5 está disponível.

if (Modernizr.canvas){
   alert("SIM canvas");
}
else{
   alert("NAO canvas");
}

De um modo parecido ao anterior, neste script estamos avaliando Modernizr.canvas, que nos dará positivo no caso do navegador ser compatível com canvas e negativo no caso contrário.

Podemos ver esses dois scripts em funcionamento em uma página à parte.

Está claro que não ajuda muito mostrar uma mensagem de alerta indicando a compatibilidade ou não, porém baseados nesta comprovação poderemos realizar diferentes ações para uns navegadores e para outros. Por exemplo, em caso de que não seja compatível um navegador, poderíamos carregar um "pollyfill" que amplie as possibilidades do navegador do cliente. Tudo isso será visto neste mesmo manual um pouco mais adiante.

Nós aqui mostramos apenas duas propriedades do objeto Modernizr, mas logicamente existem muitas mais. A listagem completa de propriedades do objeto para a detecção de funcionalidades HTML5 e CSS3 pode ser encontrada na própria documentação de Modernizr.

Lembre-se , além disso, que você deve ter um pacote das bibliotecas que inclua a detecção com todas aquelas propriedades que você pensa utilizar. O download indicado para desenvolvimento das bibliotecas inclui todas as propriedades e podemos criar um "build" para produção com unicamente as propriedades que desejemos utilizar. Todo isso já foi explicado no artigo Primeiros passos com Modernizr.

No momento deixaremos Javascript de lado, já que no próximo artigo explicaremos como podemos usar as classes CSS de Modernizr para aplicar estilos CSS3 em navegadores que sejam compatíveis.