Já referenciámos HTML5 e CSS3 anteriormente na Escola Criatividade, e hoje vamos trazer mais um complemento para trabalhar com ambos. Modernizr é um utilitário que adiciona classes ao elemento <html>, que lhe vai permitir apontar para funcionalidades específicas do browser, na sua folha de estilos. E para isso nem precisa de utilizar Javascript! Seja criativo e não perca mais tempo, Melhore a Utilização de HTML5 e CSS3 com Modernizr!
Já alguma vez pretendeu introduzir declarações IF no seu CSS para definir se certa funcionalidade estará disponível ou não? Com Modernizr é extremamente simples e intuitivo! Veja um exemplo:
.multiplebgs div p {
/* Aqui introduz as propriedades para os
browser que suportam a funcionalidade */
}
.no-multiplebgs div p {
/* Aqui introduz as propriedades para os
browser que não suportam */
}
Simples ou não?
EM CONCRETO, O QUE É?
Modernizr é uma biblioteca Javascript que o ajuda a tirar partido das novas tecnologias, nomeadamente HTML5 e CSS3, enquanto mantém o controlo sobre a compatibilidade com browsers antigos que não suportam as novas funcionalidades. Para isso, Modernizr utilizar uma função de detecção que vai testar o browser para verificar a sua compatibilidade com as funcionalidades, como rgba(), border-radius, transições CSS e muito mais. A grande maioria destas funcionalidades já se encontra disponível nos browsers mais recentes, e com Modernizr poderá começar a utilizá-las agora mesmo!
Modernizr também nos traz uma mais valia ao criar um objecto Javascript global que contem propriedades para cada propriedade: Desta forma, se o browser suportat, o valor será verdadeiro, caso contrário será falso. Além disso, traz-nos suporte para estilização e impressão de elementos HTML5 – Desta forma poderá utilizar mais semântica como <section>, <header> e <dialog> sem ter de se preocupar com o facto de eles trabalharem ou não com o Internet Explorer.
IMPORTANTE: AQUILO QUE MODERNIZR NÃO FAZ
Modernizr não é um milagre caído do céu, e apesar de ser bastante valioso e útil, não vem resolver todos os problemas dos programadores e designers. Modernizr não adiciona as funcionalidades inexistentes aos browsers – Simplesmente detecta se é possível utilizá-las ou não com o browser, e permite-lhe trabalhar correctamente com os browsers que não suportam as funcionalidades.
QUEM UTILIZA O MODERNIZR?
Existem variadíssimos websites conhecidos que utilizam Modernizr, tome nota:
Twitter, American Eagle, Burger King, The Knot, Capital One, Posterous, NFL, The State of Texas, Good Magazine, entre muitos muitos outros.
COMO UTILIZAR?
Felizmente a utilização de Modernizr é super simples, basta introduzir o ficheiro modernizr-1.7.min.js (No caso da versão 1.7, a última à data deste artigo) na página e adicionar a class “no-js” ao elemento <html>. Depois disso é executado automaticamente e estará apto a utilizar o Modernizr na sua plenitude! Para mais detalhes é aconselhável fazer uma leitura à documentação disponível.
QUAL A SUA OPINIÃO SOBRE MODERNIZR?
Qual é a sua posição relativamente ao uso de Modernizr? É a favor? É contra? Deixe a sua opinião e partilhe a sua experiência de utilização de Modernizr!
Abraço
Migmar
Mais um post bastante util. Obrigado.
Nota: atenção às traduções – library != livraria – library == biblioteca.
Abraco
Diogo Espinha
Olá Migmar, obrigado pelo seu comentário e pelo reparo no que toca à biblioteca!
Abraço, volte sempre.
felipe
descobri a pouco tempo o modernizr, ja havia ouvido falar
pode nao fazer milagre, mas eh muito util, se unir ele aos IE-Fixes da vida e ao html5 for ie, da pra fazer muita coisa
Hj o safari atualizou e agora posso validar meu site, agora , na versao 5.1, ele aceita mais recursos css3, isso claro sem o uso de atributos do webkit q a w3c nao aceita e nao valida.
Dylan Thomas
Diogo tem algum ebook para voce me recomendar? pode ser premium ou free, tanto faz, assim posso me aprimorar
.
Obrigado, otimo post.
Dylan Thomas
Um ebook sobre HTML5 e CSS3
Fernando Moreira Costa
Sou completamente a FAVOR! muito bom ja vou utiliza-lo em meus projetos… =)