Os navegadores estão cada vez mais poderosos, e cheios de recursos. Queremos usar os últimos avanços e fornecer uma experiência melhor para nossos usuários. Entretanto, não podemos esquecer que esses recursos não estão disponíveis em todos os navegadores. Isso quer dizer que mesmo que você esteja usando a última versão de um navegador, um poderá ter suporte algum recurso e outro não. Isso é muito comum de acontecer.
A melhoria nos ajuda nas seguintes situações: Não podemos “obrigar” nossos usuários a baixarem o navegador com todos os recursos que gostaríamos, usuários que desabilitam seu JavaScript, acessos a partir de dispositivos móveis, pessoas com dificuldades visuais, motoras, etc.
O que é a melhoria progressiva
Melhoria progressiva é a estratégia de criação de um site (aplicativo, sistema…) pensando primeiro em um nível básico de experiência, usuários com menos recursos por exemplo… E a adição de melhorias funcionais quando o navegador suportar. Esses usuários têm que alcançar o mesmo objetivo (acesso a uma informação, comprar algo…) do que aqueles usuários com suporte a recursos mais avançados em seus navegadores.
Melhora progressiva utiliza a antiga abordagem do desenvolvimento em camadas. Usar HTML para conteúdo, CSS para a apresentação, e JavaScript para interatividade e comportamentos. Se por algum motivo JavaScript não funcionar, o site ainda deve manter uma boa aparência.
Caso os estilos CSS não carregarem (veja o artigo Aplicando Progressive Enhancement no CSS) corretamente, ou o navegador não entender determinada propriedade o conteúdo HTML ainda deve estar lá acessível ao usuário. Pense que seu site não precisa ter exatamente a mesma aparência em todos navegadores, ele só precisa entregar corretamente o conteúdo e suas funcionalidade. Simples assim.
Aplicando Progressive Enhancement no HTML
HTML é a única camada em que podemos confiar com toda a certeza. A maioria dos navegadores irá mostrar algo independente do suporte a um elemento HTML. Mesmo o cenário mais restrito terá suporte ao HTML. HTML é a base de toda página na Internet.
Como estamos falando de tecnologias é claro que o HTML também evoluiu, e muito! Nos últimos anos a linguagem recebeu novos elementos semânticos, atributos, API’s, elementos de formulários, etc. Infelizmente alguns navegadores, até mesmo em suas últimas versões, as vezes acabam demorando ou não implementando as recomendações do W3C.
Para a sorte de todos desenvolvedores as recomendações do W3C são feitas pensando no Progressive Enhancement. Por exemplo: Se usarmos a marcação <time>22:39</time> em um navegador sem suporte a esse elemento, o navegador simplesmente irá mostra-lo em um campo padrão do tipo input text (controle padrão de formulário).
- A recomendação do W3C diz que sempre que um elemento HTML não for reconhecido pelo navegador o mesmo deve tentar renderizar seu conteúdo.
- Quando um atributo não for reconhecido, o navegador deve ignorar o atributo e seu valor. Caso o navegador não tenha suporte para algum valor de atributo, o navegador deve aplicar o valor padrão HTML para aquele atributo.
Um problema que temos em relação a isso é que nem todos navegadores seguem essas recomendações acima.
Versões anteriores ao IE9 não reconhecem os novos elementos da HTML5. Por exemplo, <header> </header> é um dos vários elementos que os IEs não dão suporte (http://caniuse.com/#search=header). Os navegadores mostram o conteúdo dos elementos, mas não conseguimos estiliza-los. A boa notícia é que temos algumas soluções.
Suporte para HTML5 em versão antigas do internet Explorer
Uma biblioteca JavaScript foi criada com o objetivo de resolver em partes essas dificuldade de versões mais antigas do IE darem suporte aos novos elementos do HTML. Podemos resolver problemas de estilização e interpretação dos elementos HTML com uso da biblioteca https://code.google.com/p/html5shiv/
Usei exemplos bem básicos apenas para ilustrar o poder de usar Progressive Enhancement já aplicando desde o HTML. Acredito que estabelecendo primeiro como seu site deve funcionar em um nível mais básico , você consegue ter uma compreensão mais clara dos requisitos do projeto.
Curta a página do blog kadunew no Facebook. Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.