Aplicando o progressive enhancement

Aplicando o progressive enhancement
flavio.almeida
flavio.almeida

Compartilhe

Sempre desejou utilizar recursos modernos do HTML5 e do CSS3, mas era impedido por ter que suportar navegadores mais antigos? Seu site para de funcionar com JavaScript desabilitado?

Neste post, mostrarei maneiras de aplicar o conceito de progressive enhancement atacando a tríade estrutura, estilo e comportamento para ajudá-lo na difícil tarefa de agradar gregos e troianos que chegam em seu website.

Uma analogia simples

Havia um grande rio que cortava duas cidades e dois concorrentes no negócio de travessia. O primeiro utilizava canoa e o segundo jet ski. O primeiro, para melhorar a experiência de seus usuários, adicionou um motor à canoa.

Tudo funcionava perfeitamente até que houve escassez de combustível. Sem energia, o jet ski deixou de funcionar e nenhuma travessia era feita. Com a canoa, ainda era possível navegar, mesmo sem o motor do concorrente, permitindo que os usuários ainda acessem este recurso.

E o Progressive enhancement?

O conceito de progressive enhancement define que a construção de uma página parte de uma base comum e garantida de executar nos mais diversos navegadores para depois acrescentar pequenas melhorias mesmo que só funcionem em navegadores modernos.

Se alguma dessas melhorias não for suportada pelo navegador, o usuário ainda assim conseguirá acessar o website, mesmo que tenha sua experiência reduzida.

Este conceito não se aplica uniformemente numa página e deve ser pensando isoladamente para a estrutura, estilo e comportamento. Cada ponto da tríade se comporta diferentemente quando degradado, isto é, quando não é suportado pelo navegador.

Uma maneira de pensar em cada ponto é através do critério fail-safe.

O critério fail-safe

O critério fail-safe diz que, se um determinado recurso não é suportado pelo navegador, isso não deve resultar em erro, até mesmo sem haver a necessidade de tratamento especial pelo programador. Estão incluídos neste critério o  HTML e o CSS.

No HTML, quando usamos alguma tag desconhecida pelo navegador, nenhum erro é gerado, porque a tag é simplesmente ignorada.

Um exemplo prático disso é a utilização da tag

Veja outros artigos sobre Front-end