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:
- @font-face
- Canvas
- Canvas Text
- HTML5 Audio
- HTML5 Video
- rgba()
- hsla()
- border-image:
- border-radius:
- box-shadow:
- Multiple backgrounds
- opacity:
- CSS Animations
- CSS Columns
- CSS Gradients
- CSS Reflections
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- Geolocation API
- 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.
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.