Neste artigo vamos detectar três estilos CSS3 e oferecer estilos CSS alternativos para os navegadores que não os suportem. Em concreto nos exemplos trabalharemos com os atributos de CSS3 para fazer background múltiple (atribuir vários fundos de imagem a um mesmo elemento), text-shadow (fazer efeitos de sombra em textos) e os relacionados com maquetação automática em colunas.

É claro, já que estamos no Manual de Modernizr, veremos como fazê-lo usando estas bibliotecas Javascript.

Começamos por oferecer um link para uma página que realizamos como exemplo destas propriedades. Dependendo do navegador e da compatibilidade com as regras de estilo utilizadas você verá o exemplo de uma maneira ou de outra.

Fundos múltiplos em um mesmo elemento

A partir de CSS3 podemos atribuir vários fundos de tipo imagem a um mesmo elemento da página. Para isso simplesmente separamos por vírgula cada um dos fundos diferentes que estamos atribuindo.

Agora bem, se nosso navegador não é compatível com CSS3 e vê vários fundos diferentes em um mesmo elemento, por muitas vírgulas que ponhamos para separá-los, não entenderá nada. O resultado será que não nos mostrará nenhum dos fundos.

A situação, antes de Modernizr nos obrigava a colocar sempre um único fundo, que funcionará em todo caso. Em caso de que coloquemos vários fundos, também antes de Modernizr, nos arriscamos a que o navegador do usuaário não nos mostre nenhum.

A solução é tão fácil como usar Modernizr para detectar quando podemos aplicar múltiplos fundos e colocar um único fundo quando os navegadores somente suportam um. Para isso vamos definir no estilo geral do elemento um único fundo.

#central{
   background: url(images/patron.png);
}

Em seguida, no caso de que se permitam múltiplos fundos, Modernizr cria uma classe na etiqueta BODY chamada "multiplebgs", que podemos utilizar para aplicar mais de um fundo sem perigo de que a compabilidade de nosso navegador com as folhas de estilo o negue.

.multiplebgs #central{
   background: url(images/diamante.png) no-repeat bottom right,
   url(images/patron.png);
}

Sombras em textos

Apesar de que text-shadow não pertença especificamente a CSS3, senão que foi introduzido já com a segunda versão da linguagem, também se pode detectar com Modernizr e resultará útil porque atualmente muitos navegadores ainda não suportam essa regra.

No elemento anterior havíamos colocado um fundo mais para claro, que nos obrigava a escrever com uma letra de cor escura. Ademais quero colocar uma sombra no meu texto, também escura. Para tanto definimos este estilo de maneira geral para os parágrafos que vão dentro da camada #central.

#central p{
   color: #33c;
   text-shadow: -1px 1px 5px #006;
}

Agora bem, texto escuro sobre sombreado escuro não fica muito bem. Gostaria de detectar em que casos o navegador suporta sombreado, para então colocar o texto claro. Texto claro sobre sombreado escuro contrastará suficientemente.

Assim que a solução passa por usar Modernizr, e criar uma regra de estilo para fazer um texto de cor branca que só se tenha em conta nos navegadores que aceitam sombreado de texto. Para isso é tão simples como utilizar a classe "textshadow" que estará ativa somente quando o navegador disponha de compatibilidade com sombreado de textos.

.textshadow #central p{
   color: #fff;
}

Distribuição em várias colunas com CSS3

Graças a uma serie de atributos disponíveis nas folhas de estilo em cascata nível 3, se podem agrupar os conteúdos em colunas de maneira automática. É uma utilidade interessante que ajudará as páginas web a se parecerem muito mais às publicações impressas. O problema é que ainda não está disponível em muitos navegadores, de modo que temos que utilizar essa característica com cuidado.

No exemplo deste artigo temos uma lista que tem vários elementos, à que aplicamos estilos CSS3 para que apareçam em várias colunas.

#minhalista{
   column-width: 120px;
   column-gap: 25px;
   column-rule: 2px solid #ccf;
}

Graças a isso vemos que os elementos da lista aparecem maquetados em varias colunas, mas em navegadores que não o admitam apareceriam um debaixo do outro. Para emular com CSS2 a maquetação em colunas podemos utilizar o atributo float, atribuir uma largura aos elementos da lista e uma margem para fazer o espaçamento entre colunas.

#minhalista li{
   float: left;
   width: 120px;
   margin-right: 25px;
}

Mas claro, isso provocaria que todos os navegadores fizessem "flutuar" os elementos à esquerda. Para evitá-lo podemos utilizar a classe "csscolumns" que só estará disponível no caso de que o navegador seja compatível com a distribuição em colunas.

.csscolumns #minhalista li{
   float: none;
   margin: 0;
   width: auto;
}

Como vemos, no caso de que o navegador entenda as regras de estilos para produzir as colunas automaticamente, estamos fazendo que os elementos não flutuem, que sua largura seja automática e que não tenham margem à direita.

Conclusão

Você pode ver de novo o exemplo em funcionamento em uma página à parte.

Com isto terminamos os exemplos de detecção de compatibilidade CSS3 de Modernizr, mas lembrem que na documentação das bibliotecas vocês encontrarão muitas outras classes para detecção da compatibilidade com CSS3.

Nos próximos artigos daremos um passo adiante, pois ainda falta muito por aprender de Modernizr e coisas mais interessantes ainda, como a carga de Polyfills para compatibilidade com HTML5.