A magia CSS de Modernizr

Definir estilos CSS3 para os navegadores compatíveis e estilos CSS alternativos para os navegadores que não sejam compatíveis com as propriedades CSS3 que desejemos utilizar.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 10/11/11
Valorize este artigo:
Um dos principais usos que poderemos fazer de Modernizr é definir estilos CSS3 com compatibilidade para todos os navegadores. Bom, não nos enganemos, se um navegador não é compatível com CSS3, Modernizr não vai fazer milagres, mas pelo menos pode nos ajudar a definir estilos alternativos. O que sem dúvida será interessante é esquecermos dos hacks CSS, cujo uso é desaconselhável na maioria dos casos, mas sobre tudo, poder utilizar as novas características das CSS3 agora mesmo e sem necessidade de nos preocuparmos se o navegador entenderá ou não nossas declarações de estilos.

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.

Classes CSS de Modernizr

A "magia" CSS de Modernizr se baseia na criação em linha de uma série de classes CSS. Modernizr se encarregará de criar essas classes e colocá-las na etiqueta BODY da página. Todo o processo é automático e a criação de cada uma dessas classes se realizará unicamente no caso do navegador ser compatível com cada uma das características de CSS3.

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.

Nota: Como explicado no artigo Primeiros passos com Modernizr, podemos fazer um para entornos em produção apenas com as características de CSS3 e HTML5 que desejemos detectar. No caso da versão para download de Modernizr em ambientes em desenvolvimento, existirá suporte para detectar todas as características de HTML5 e CSS3 possíveis nas bibliotecas.

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">

Nota: Insistimos em que essas classes se colocarão dinamicamente por meio das bibliotecas Javascript de Modernizr, no caso de que o navegador seja compatível com essas funcionalidades. Nós teremos a etiqueta BODY sem nenhuma classe no código HTML e será Javascript o encarregado de colocar as class de CSS. Se o navegador só é compatível com uma das funcionalidades, só se aplicará essa classe que se está suportando.

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.

Como utilizar as classes CSS de Modernizr para definir estilos compatíveis

Agora que conhecemos a infra-estrutura de classes que Modernizr nos proporcionará, podemos passar a ver como aplicar estilos CSS3 para todos os navegadores compatíveis e ademais, estilos alternativos para os navegadores que não o sejam.

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.





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato