Modernizr – Aula 1 de 5 | Introdução | Série HTML 5 | SW9

Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)

Dando continuidade a MEGA Série sobre HTML5.  O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.

Nesta aula vamos começar a falar sobre a biblioteca chamada Modernizr.  Serão ao todo 5 aulas sobre este tema, onde explicarei passo a passo o uso desta biblioteca, passando pela introdução, instalação, configuração, detecção de recursos HTML5, detecção de recursos CSS3 e o uso conjunto com Polyfill para trazer uma solução para os navegadores não compatíveis.

E o melhor de tudo, iremos implementar todo esse controle no projeto que estamos construindo, e que disponibilizo em minha área de downloads.

O que veremos nesta aula?

Nesta primeira aula sobre a biblioteca Modernizr faremos uma breve introdução sobre esta biblioteca, falando sobre a motivação que fez com que  a biblioteca fosse criada, qual o seu objetivo e muito mais.

Motivação

Todos nós que trabalhamos com desenvolvimento web, temos uma vaga noção da imensidão de tecnologias disponíveis, navegadores e dispositivos. Neste contexto, imagina a dificuldade que todos nós temos em construir sites, aplicações web e aplicações híbridas para que elas funcionem de forma aceitável (o mais compatível possível) independente do navegador e dispositivo que o usuário utilize.

Com o surgimento do HML5 e CSS3 estes problemas de compatibilidade entre navegadores se intensificou, tornando ainda mais difícil a nossa missão.

Apesar dos navegadores mais modernos já serem compatíveis com a maioria dos recursos que vieram com o HTML5 e CSS3, temos do lado oposto alguns navegadores que ainda resistem a estes novos recursos (o navegador Internet Explorer é um destes navegadores).

Mas agora eu te pergunto: como manter um projeto web, com a intenção de deixá-lo o mais compatível possível e não comprometendo a experiência do nosso usuário final?  Como podemos identificar se um navegador é ou não compatível com um determinado recurso? Não sendo compatível, de que forma podemos aplicar uma solução de contorno para este navegador incompatível? Eu preciso manter uma tabela de compatibilidade comigo (navegadores Vs recursos) e ficar me desdobrando para controlar tudo isso em meu projeto?

Felizmente, foi pensando em todas estas questões levantadas acima, que criaram a biblioteca Modernizr

Objetivo

Indo direto ao ponto, a biblioteca Modernizr tem como único objetivo detectar os recursos, seja HTML, Javascript e CSS e indicar se possuem ou não compatibilidade com o navegador que está sendo usado pelo usuário final.   Para um melhor entendimento, vamos a um exemplo prático:

Suponha que no seu projeto web você precise usar o recurso de Canvas (recurso que surgiu com o HTML5), mas infelizmente alguns navegadores não são compatíveis com este recurso.  A solução neste caso é usar a biblioteca Modernizr, pois ela vai detectar (em tempo de execução) se o navegador que o usuário está usando é compatível com o Canvas.  Mas e se o navegador não for compatível?  O próprio Modernizr testa se o recurso é compatível ou não.  Se for compatível, não teremos atuação.  Se for incompatível, podemos utilizar um Polyfill para preencher a lacuna daquele navegador e propor uma solução de contorno (como por exemplo um componente de canvas alternativo).   Portanto, com esta abordagem o usuário final sofrerá o menor impacto possível enquanto estiver navegando em seu projeto web.

Modernizr Vs Polyfill

A bilbioteca Modernizr é apenas uma ferramenta de detecção de recursos, ela por si só não atua como um Polyfill.  Mas o que seria um Polyfill?

Conforme Paul Irish, podemos definir um Polyfill como sendo “Um shim que imita uma API futura, fornecendo funcionalidades de fallback para navegadores mais antigos“.

Em linhas gerais, um polyfill é um trecho de código que podemos usar para “preencher uma lacuna” e trazer uma solução de contorno para navegadores mais antigos que não suportam determinados recursos.

Como eu havia comentado logo acima, a biblioteca Modernizr não trabalha como um Polyfill, mas podemos usá-la como parte de um processo de Polyfilling. No decorrer das aulas sobre Modernizr, eu irei mostrar na prática como usar o Modernizr em conjunto com Polyfill, e trazer a melhor experiência possível aos nossos usuários.

Como a biblioteca Modernizr trabalha?

A Biblioteca age de acordo com os passos a seguir:

1) Ela testa mais de quarenta recursos de CSS3 e HTML5 em alguns milisegundos;

2) Depois ela cria objetos javascript contendo os resultados destes testes;

3) Adiciona classes no elemento HTML descrevendo exatamente quais propriedades e recursos são ou não nativamente suportadas;

4) Finalmente, você consegue ter os resultados descritos nos navegadores dinamicamente e então pode tomar decisões criando alternativas

para aquelas propriedades/recursos não suportados pelos navegadores mais antigos.

[Conclusão]

Na aula de hoje [Modernizr – Aula 1 de 5 | Introdução | Série HTML 5], demos sequência na Mega série sobre HTML 5.  Iniciamos um novo conjunto de aulas, agora para falar da biblioteca Modernizr.

Nesta primeira aula foi dada uma introdução sobre o tema, onde falei sobre a motivação, objetivos e como funciona a biblioteca Modernizr.

Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

[Links úteis]

Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph

Modernizr: https://modernizr.com/

Cloud 9: https://c9.io/login

PlayList Cloud 9: https://goo.gl/7aQbD6

PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8

Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: https://youtube.com/+sw9brl

Link do vídeo: https://youtu.be/Fy7WTws-1SU

Parceria: https://www.tubebuddy.com/pricing?a=sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se