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 HTML5CSS3, 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

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Migmar
    11 de março de 2011

    Mais um post bastante util. Obrigado.

    Nota: atenção às traduções – library != livraria – library == biblioteca.
    Abraco



    • Diogo Espinha
      12 de março de 2011

      Olá Migmar, obrigado pelo seu comentário e pelo reparo no que toca à biblioteca!

      Abraço, volte sempre.



  2. felipe
    20 de julho de 2011

    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.



  3. Dylan Thomas
    6 de novembro de 2011

    Diogo tem algum ebook para voce me recomendar? pode ser premium ou free, tanto faz, assim posso me aprimorar :D.

    Obrigado, otimo post.



  4. Dylan Thomas
    6 de novembro de 2011

    Um ebook sobre HTML5 e CSS3



  5. Fernando Moreira Costa
    11 de janeiro de 2012

    Sou completamente a FAVOR! muito bom ja vou utiliza-lo em meus projetos… =)


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz