A filosofia PE: comece com HTML

O aprimoramento progressivo (PE) é a prática de criar uma experiência utilizável apenas com HTML e, depois, adicionar camadas de CSS para apresentação e de JavaScript para interatividade. Cada camada aprimora a anterior; nenhuma é necessária para que a página funcione.

HTML é a camada mais resistente. Ele é analisado parcialmente quando está malformado, ignora tags que não entende e funciona sem scripts ou folhas de estilo. Em contrapartida, um arquivo CSS ausente prejudica a aparência, e um pacote JS com falha pode deixar uma página inutilizável.

Conteúdo (HTML), apresentação (CSS), comportamento (JS). Um botão de envio é um <button type="submit"> real — o formulário é enviado mesmo se JS falhar. O CSS o deixa visualmente atraente; o JS pode interceptar o envio para AJAX, mas o HTML subjacente garante a ação.

As redes caem. Os scripts não carregam. Os usuários desativam o JS. Conexões lentas atingem o tempo limite antes que os pacotes cheguem. Uma página com PE se degrada graciosamente em cada um desses casos: o usuário ainda pode ler, navegar e enviar formulários usando apenas HTML.

Páginas que renderizam HTML utilizável antes do carregamento dos scripts têm uma primeira pintura de conteúdo mais rápida, um tempo até a interatividade menor e pontuações melhores nas principais métricas vitais da Web. O navegador exibe conteúdo significativo sem esperar a inicialização do JS.

Elementos HTML reais já vêm com acessibilidade integrada. <button> pode ser ativado pelo teclado; <input type="email"> recebe o teclado virtual correto; <a> é anunciado como um link por leitores de tela. O PE fornece padrões acessíveis gratuitamente.

Os rastreadores de mecanismos de busca preferem HTML que possam analisar sem executar JavaScript. Páginas criadas com PE são indexadas completamente sem execução de JavaScript; páginas que usam apenas uma SPA dependem do suporte do rastreador à execução de scripts e muitas vezes não incluem todo o conteúdo.

Aplicações de página única renderizam tudo no lado do cliente e quebram completamente quando JS falha. PE é o oposto: o servidor envia HTML completo, e JS adiciona melhorias como pré-carregamento, atualizações otimistas ou edição no próprio local sem jamais assumir a funcionalidade básica.

Remix, componentes de servidor do Next.js, SvelteKit e Astro favorecem o HTML renderizado no servidor com aprimoramento progressivo por JavaScript. Escolher uma dessas estruturas torna o PE o caminho de menor resistência.

Interfaces altamente interativas, como editores colaborativos, aplicações de desenho e jogos em tempo real, não podem existir de forma significativa sem JS. A “alternativa sem JS” para essas aplicações pode ser um modo estático somente leitura — melhor que nada, mas inevitavelmente limitado. Seja honesto sobre essa concessão.

“Faça funcionar, depois deixe bonito e, por fim, torne rápido.” Crie primeiro o formulário HTML; verifique se ele funciona com curl. Adicione CSS para o layout. Adicione JS para validação no próprio local, atualizações otimistas ou envio via AJAX. Cada camada é opcional; o resultado compõe uma ótima experiência para todos.

Qual é a promessa central do aprimoramento progressivo?

O aprimoramento progressivo começa com HTML semântico que funciona sem CSS ou JS e, depois, adiciona camadas de CSS para apresentação e de JS para interatividade. Cada camada é opcional; a página se degrada graciosamente diante de falhas. O PE oferece vantagens em desempenho, acessibilidade, otimização para mecanismos de busca e resistência — ao custo de mais trabalho inicial de projeto para aplicações altamente interativas.