Progressive Enhancement: Conteúdo Básico e Funcionalidades Avançadas

O que é Progressive Enhancement?

Progressive enhancement é uma abordagem no desenvolvimento web que começa com o 'pior caso' (navegador menos capaz) e melhora a experiência com as funcionalidades suportadas.

Princípio central: O conteúdo e a funcionalidade básica sempre devem funcionar. JavaScript, CSS e as funcionalidades avançadas de HTML melhoram a experiência mas não são necessárias.

Opoto de graceful degradation: Graceful degradation começa com a melhor experiência e se degrada em ambientes de baixa capacidade. Progressive enhancement começa com a experiência básica e melhora.

Vantagens: Maior acesso de usuários, melhor desempenho, melhor SEO, melhor acessibilidade.

Camadas Fundamentais

HTML (conteúdo): Conteúdo básico e estrutura com HTML semântico. Legível e usável sem JavaScript.

CSS (apresentação): Os estilos básicos funcionam em todos os navegadores. As funcionalidades avançadas de CSS são aplicadas condicionalmente com @supports.

JavaScript (comportamento): A funcionalidade básica fornecida por formulários HTML. JavaScript adiciona UX melhorada (AJAX, animação).

Cada camada é construída sobre a anterior. Se uma camada inferior falhar, as camadas superiores também falham mas a funcionalidade básica é preservada.

Abordagem HTML First

HTML semântico: Use os elementos HTML corretos. <button>, <a>, <form>, <input>, <nav>, <main>, <article>.

Formulários: Crie formulários que funcionem sem JavaScript. Processamento do lado do servidor com atributos action e method.

Links: Use links <a href="..."> reais. Faça routing do lado do cliente com JavaScript mas forneça routing do lado do servidor como fallback.

NoScript: Mostre conteúdo alternativo com a tag <noscript> quando JavaScript está desabilitado.

Progressive Web App: Service Worker e manifest são adicionados quando o site básico funciona. O site básico funciona sem JavaScript.

CSS Progressive Enhancement

@supports: Estilização condicional com CSS feature query. @supports (display: grid) { .container { display: grid; } }.

Fallback: O estilo básico funciona em todos os navegadores. As funcionalidades avançadas são aplicadas em navegadores que as suportam.

Exemplo: .button { background: blue; } @supports (backdrop-filter: blur(10px)) { .button { backdrop-filter: blur(10px); background: rgba(0,0,255,0.5); } }.

CSS custom properties: Use valores de fallback se as variáveis não são suportadas. color: blue; color: var(--primary, blue);.

JavaScript Progressive Enhancement

Detecção de funcionalidades: Verifique as capacidades do navegador com Modernizr ou detecção nativa de funcionalidades.

Polyfill: Adicione funcionalidades faltantes (fetch, Promise, IntersectionObserver) com polyfill. Use core-js ou polyfill.io.

Graceful degradation: A funcionalidade básica deve ser preservada se JavaScript falhar. Capture erros com try/catch.

Module/nomodule: ES modules para navegadores modernos, bundle transpilado para navegadores antigos. <script type="module" src="app.mjs"> e <script nomodule src="app.js">.

Lazy loading: Carregue de forma lazy as funcionalidades avançadas (animação, widget interativo). O conteúdo básico carrega imediatamente.

Testes e Avaliação

Teste com JavaScript desabilitado: Desabilite JavaScript no navegador. A funcionalidade básica funciona?

Teste de conexão lenta: Teste com 3G ou WiFi lento. O conteúdo carrega a tempo?

Teste de navegador antigo: Teste com IE11, Safari/Chrome antigo. A funcionalidade básica funciona?

Lighthouse: Verifique as pontuações de Accessibility e Best Practices. Progressive enhancement melhora essas pontuações.