Os sites do Maujor estão hospedados na DialHost.

Biblioteca Modernizr para HTML5 e CSS3

Introdução

Modernizr (download) é uma pequena biblioteca JavaScript (7kb na versão comprimida) criada por Faruk Ateş e Paul Irish que tem por finalidade detectar o suporte do navegador para algumas das novas funcionalidades da HTML5 e das CSS3. Atualmente em sua versão 1.0 a biblioteca detecta as seguintes funcionalidades:

  1. @font-face
  2. Canvas
  3. Canvas Text
  4. HTML5 Audio
  5. HTML5 Video
  6. rgba()
  7. hsla()
  8. border-image:
  9. border-radius:
  10. box-shadow:
  11. Multiple backgrounds
  12. opacity:
  13. CSS Animations
  14. CSS Columns
  15. CSS Gradients
  16. CSS Reflections
  17. CSS 2D Transforms
  18. CSS 3D Transforms
  19. CSS Transitions
  20. Geolocation API
  21. Input Types

Com referência ao item 21 anterior, a HTML 5 define 13 tipos de inputs a saber: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range e color.
No dia que esta matéria foi escrita (25-11-2009) o navegador Opera é aquele que suporta a maior quantidade de tipos de inputs - 10 tipos dos 13 possíveis.

Como funciona?

A biblioteca usa o moderno conceito de detecção de funcionalidade para determinar o suporte pelo navegador em lugar de fazer a detecção do navegador com uso da não confiável e ultrapassada propriedade navigator.userAgent.

A biblioteca cria um objeto global JavaScript denominado Modernizr contendo propriedades para cada uma das novas funcionalidades da HTML 5 e CSS 3 - aquelas citadas anteriomente no título Introdução. Se o navegador suporta uma funcionalidade a propriedade retorna TRUE, se não o retorno é FALSE.

Por exemplo:

if (Modernizr.multiplebgs) {
  // script para navegadores que suportam múltiplos backgrounds 
} else {
  // script para navegadores que não suportam múltiplos backgrounds 
}

Ao ser carregada a biblioteca em um documento web ela atribui, automaticamente, ao elemento raiz do documento, html, um conjunto de classes pré-definidas indicando o suporte ou não a cada uma das propriedades testadas. A classe atribuida fornece um seletor para estilização. Vejamos um exemplo para esclarecer: suponha que o navegador X suporta canvas, audio e border-radius e não suporta box-shadow, múltiplos backgrounds e rgba().

Qualquer página aberta no navegador X à qual esteja vinculada a biblioteca terá seu elemento raiz populado com o atributo class conforme mostrado a seguir:

...
<html class="canvas audio borderradius no-boxshadow no-multiplebgs no-rgba">
...

Na tabela a seguir mostro os nomes das classe pré-definidas.

Funcionalidade Nome da classe
Tec. Nome Suporta Não suporta
CSS3 @font-face .fontface .no-fontface
HTML5 Canvas .canvas .no-canvas
HTML5 Canvas Text .canvastext .no-canvastext
HTML5 Audio .audio .no-audio
HTML5 Video .video .no-video
CSS3 rgba .rgba .no-rgba
CSS3 hsla .hsla .no-hsla
CSS3 border-image .borderimage .no-borderimage
CSS3 border-radius .borderradius .no-borderradius
CSS3 box-shadow .boxshadow .no-boxshadow
CSS3 Multiple bgs .multiplebgs .no-multiplebgs
CSS3 opacity .opacity .no-opacity
CSS3 CSS animations .cssanimations .no-cssanimations
CSS3 CSS Columns .csscolumns .no-csscolumns
CSS3 CSS Gradients .cssgradients .no-cssgradients
CSS3 CSS Reflections .cssreflections .no-cssreflections
CSS3 CSS 2D Transforms .csstransforms .no-csstransforms
CSS3 CSS 3D Tranforms .csstransforms3d .no-csstransforms3d
CSS3 CSS Transitions .csstransitions .no-csstransitions
HTML5 Geolocation API .geolocation  
HTML5 Input types não aplica classes

Qual é a utilidade destas classes?
Observe o exemplo a seguir que esclarece o uso da classe:

#meu-div { /* para navegadores que não suportam box-shadow */
	border-bottom: 1px solid #666;
	border-right: 1px solid #777;
}
.boxshadow #meu-div { /* para navegadores que suportam box-shadow */
	border: none;
	box-shadow: #666 1px 1px 1px;
	-moz-box-shadow: #666 1px 1px 1px;
	-webkit-box-shadow: #666 1px 1px 1px;
}

Este exemplo consta da documentação oficial da biblioteca, contudo segundo meu entendimento usar a classe adicionada pela biblioteca para servir regras de estilo alternativas é completamente dispensável uma vez que regras alternativas podem ser definidas com uso criterioso do efeito cascata e sem necessidade da biblioteca.

Nota: A biblioteca cria os novos elementos da HTML5 e assim possibilita o reconhecimento e estilização deles, notadamente pelos navegadores Internet Explorer atuais, dispensando o uso de scripts adicionais para aqueles navegadores

A biblioteca é ótima para fazer experiências com novas funcionalidades versus navegadores. O que você acha? É capaz de citar algum caso em que o emprego real da biblioteca seja útil? Deixe sua opinião nos comentários.

E o seu navegador? Suporta o quê?

Usando a biblioteca os seus autores desenvolveram um script para uma Suite de Testes para as novas funcionalidade a qual eu disponibilizo para meus leitores. Vá para a Suite de Testes e confira o que seu navegador suporta e não suporta das novas funcionalidades.

Nota

Esta matéria apresentou sumariamente a biblioteca Modernizr. Para maiores detalhes visite a documentação oficial da biblioteca.

Compartilhe essa matéria com seus amigos

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.