Para começar, teremos que ter incluído o script Javascript com as bibliotecas de Modernizr, algo que já aprendemos no artigo Primeiros passos com Modernizr, publicado anteriormente no Manual de Modernizr.
Por exemplo, vamos pensar que fizemos um "build" de Modernizr para detectar a compatibilidade ou não com dois atributos CSS3, por exemplo as bordas arredondadas e os fundos múltiplos.
Se o navegador do visitante é compatível com essas duas características das CSS3, serão criadas duas classes na etiqueta BODY, ou seja, nossa etiqueta que antes era assim:
<body>
Passará a ter duas classes CSS como estas:
<body class="borderradius multiplebgs">
Na documentação de Modernizr podemos ver uma listagem completa das classes CSS que serão geradas na etiqueta BODY quando o navegador suporte cada característica das que se podem detectar com estas bibliotecas.
Nosso objetivo é aplicar sombra com CSS3 nos navegadores que o permitam e emular esse sombreado por meio de estilos CSS clássicos nos navegadores que não suportem o atributo box-shadow.
Primeiro, vejamos uma simples camada com uma etiqueta DIV de HTML:
<div id="minhacaixa">
Esta caixa terá sombra.
</div>
Agora podemos aplicar-lhe estilos CSS que seriam comuns para todos os navegadores, tanto os que suportem o atributo box-shadow como os que não.
#minhacaixa{
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
padding: 10px;
}
No caso anterior se colocaram estilos CSS convencionais, que todos os navegadores entendem.
Agora, utilizando Modernizr, se nosso navegador era compatível com o atributo box-shadow de CSS, se terá colocado a classe "boxshadow" ao BODY. Nós podemos utilizar tal classe CSS para aplicar estilos que sabemos que só acabarão afetando os navegadores que suportem o atributo box-shadow.
.boxshadow #minhacaixa{
border: 1px solid #ccc;
-webkit-box-shadow: #999 3px 3px 3px;
-moz-box-shadow: #999 3px 3px 3px;
box-shadow: #999 3px 3px 3px;
}
Como se pode ver, sobrescrevemos a regra CSS para a borda e ademais aplicamos vários atributos box-shadow (um para os navegadores baseados em Mozilla, outro para os baseados em Webkit e box-shadow sem mais nada para todos os navegadores quando suportem o atributo nativo de CSS3).
O efeito conseguido é que os navegadores modernos, que entendiam o atributo box-shadow, mostrarão uma sombra CSS3 e os mais antigos pelo menos mostrarão alguns estilos para aqueles que são compatíveis.
Você pode ver este exemplo em funcionamento neste link.
No artigo seguinte veremos como detectar a compatibilidade com a regra @font-face de Modernizr.
 | Como detectar as capacidades de navegadores com Javascript e Modernizr | Regra @font-face de CSS3 e detectar compatibilidade com Modernizr |  |
