Como garante a exibição correta das páginas em navegadores antigos ou limitados?

Utilização de Progressive Enhancement: Começo com funcionalidades básicas que funcionam em todos os navegadores, e depois adiciono capacidades mais avançadas usando JavaScript e CSS para navegadores modernos.

Aplicação de Detecção de Funcionalidades: Em vez de detectar o navegador pelo user agent, uso modernizr ou código próprio para verificar o suporte de propriedades CSS ou API específicas.

// Verificação de suporte para MutationObserver
if ('MutationObserver' in window) {
  // Usar MutationObserver
} else {
  // Usar fallback (por exemplo, EventListener antigo)
}

Polyfills e Transpiladores: Uso babel para transpilar JavaScript moderno (ES6+) para um padrão mais antigo (ES5), compatível com navegadores antigos. Para funcionalidades faltantes, uso polyfills (por exemplo, core-js). Para CSS, uso postcss com autoprefixer.

Fallbacks em CSS: Para propriedades CSS avançadas (como Grid ou Flexbox), forneço alternativas usando float ou inline-block.

/* Grid CSS com fallback para navegadores antigos */
.container {
  display: block; /* Fallback */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Minimizar dependência de JavaScript: Tento implementar funcionalidades críticas apenas com HTML e CSS, para que o site continue funcionando se JavaScript estiver desativado.

Testes: Testo regularmente o site em diferentes navegadores antigos (IE11, versões antigas do Edge) usando BrowserStack ou máquinas virtuais locais.

Limitações: Discuto com o cliente quais navegadores devem ser totalmente suportados e quais podem ter funcionalidades limitadas. Defino o limite mínimo de suporte.

Provisão de recursos alternativos: Para imagens ou vídeos, uso a tag <picture> ou <video> com diferentes formatos e fontes, para que o navegador escolha o mais adequado.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descrição da imagem">
</picture>