Modernizr – Aula 5 de 5 | Detectando Características CSS | 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.

A bola da vez é a biblioteca Modernizr. São ao todo 5 aulas + bonus 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.

O que veremos nesta aula?

Nesta quinta aula vou explicar como detectar se um determinado recurso CSS é ou não compatível com o navegador do usuário,  aplicando estes testes em nosso próprio projeto. Como complemento, se o recurso for incompatível aplicaremos um estilo alternativo para que o nosso projeto fique o mais próximo possível da versão original.

O que iremos testar?

Vamos usar a propriedade CSS chamada [box-shadow] que exibe uma sombra no local (TAG HTML) onde aplicamos este estilo.  No nosso caso, vamos aplicar o box-shadow no breadcrumb que usamos na página formularios.html.

Testando box-shadow

A primeira coisa que você precisa fazer, é garantir que a biblioteca Modernizr contenha o recurso [box-shadow] ativado.  Recomendo assistir a AULA 2, onde explico todo o processo de build e configuração da biblioteca.

Com o recurso [box-shadow] ativado, no momento que o usuário carrega a nossa página formularios.html, o Modernizr vai injetar uma classe na TAG HTML.

Se o navegador do usuário não tiver suporte ao [box-shadow], o Modernizr vai injetar a classe [no-boxshadow], caso contrário irá injetar a classe [boxshadow].

É desta forma que funciona o processo de detecção usando a biblioteca Modernizr. Com base nesta regra, vamos criar um classe chamada block (classe que iremos incluir na DIV que encapsula o breadcrumb e incluir os estilos necessários.

Então vai ficar assim:

 .block { box-shadow:0 10px 10px rgba(0, 0, 0, 0.3); }

Se simplesmente usarmos o código acima, o recurso de sombra será exibido nos navegadores compatíveis, mas nos navegadores incompatíveis (IE 8 por exemplo), a sombra não será exibida.

Como nós queremos aplicar um estilo alternativo quando o [box-shadow] não for compatível, chegou o momento de mostrar como fazer isso.

Teremos que criar duas definições para a classe .block, um delas usando a propriedade [box-shadow] e outra usando propriedades alternativas.

O código vai ficar assim:

.block { box-shadow:0 10px 10px rgba(0, 0, 0, 0.3); }



.block {
 border: 1px solid #CCC;
 border-bottom: 10px solid #CCC;
 padding: 3px;
 margin-bottom: 20px;
 }

Agora você pode me perguntar: Já está pronto? Com o código acima resolvemos o nosso problema? A resposta é NÃO.

Precisamos fazer um último ajuste no código, para que a sombra (usando o recurso box-shadow) seja exibida nos navegadores compatíveis, e o nosso estilo alternativo seja exibido em navegadores não compatíveis.

O ajuste é bem simples, e o código deve ficar assim:

.boxshadow .block {
 box-shadow:0 10px 10px rgba(0, 0, 0, 0.3);
 }



 .no-boxshadow .block {
 border: 1px solid #CCC;
 border-bottom: 10px solid #CCC;
 padding: 3px;
 margin-bottom: 20px;
 }

Você notou a diferença? Precisamos apenas incluir a classe .boxshadow e a classe .no-boxshadow em cada definição da classe .block

Desta forma, quando o [box-shadow] não seja suportado pelo navegador, a definição abaixo será utilizada:

.no-boxshadow .block {
border: 1px solid #CCC;
border-bottom: 10px solid #CCC;
padding: 3px;
margin-bottom: 20px;
}

Caso contrário:

.boxshadow .block {
box-shadow:0 10px 10px rgba(0, 0, 0, 0.3);
}

Chegou a hora da conclusão. Fiquem ligados!!! Estou preparando as aulas bônus

[Conclusão]

Na aula de hoje [Modernizr – Aula 5 de 5 | Detectando Características CSS | Série HTML 5], demos sequência na Mega série sobre HTML 5.  Expliquei como detectar se recursos CSS são compatíveis ou não com o navegador do usuário. Mostrei também como implementar uma solução de contorno para navegadores incompatíveis.

Vou disponibilizar este projeto na minha área de downloads, para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.  Dentro da minha área de Downloads, procure pela pasta HTML5.  O resto é com vocês

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/H6DEyrQ8Ee4

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

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se