¿Cómo aseguras la correcta visualización de las páginas en navegadores antiguos o limitados?

Uso de Mejora Progresiva: Comienzo con funcionalidades básicas que funcionan en todos los navegadores, y luego añado capacidades más avanzadas usando JavaScript y CSS para navegadores modernos.

Aplicación de Detección de Funciones: En lugar de detectar el navegador por el user agent, uso modernizr o código propio para verificar el soporte de propiedades CSS o API específicas.

// Verificación de soporte para MutationObserver
if ('MutationObserver' in window) {
  // Usar MutationObserver
} else {
  // Usar fallback (por ejemplo, EventListener antiguo)
}

Polyfills y Transpiladores: Uso babel para transpilar JavaScript moderno (ES6+) a un estándar más antiguo (ES5), compatible con navegadores antiguos. Para funcionalidades faltantes, uso polyfills (por ejemplo, core-js). Para CSS, uso postcss con autoprefixer.

FallBacks en CSS: Para propiedades CSS avanzadas (como Grid o Flexbox), proporciono alternativas usando float o inline-block.

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

Minimizar dependencia de JavaScript: Intento implementar funcionalidades críticas solo con HTML y CSS, para que el sitio siga funcionando si JavaScript está desactivado.

Pruebas: Pruebo regularmente el sitio en diferentes navegadores antiguos (IE11, versiones viejas de Edge) usando BrowserStack o máquinas virtuales locales.

Limitaciones: Discuto con el cliente qué navegadores deben soportarse completamente y cuáles pueden tener funcionalidades limitadas. Defino el umbral mínimo de soporte.

Provisión de recursos alternativos: Para imágenes o videos, uso la etiqueta <picture> o <video> con diferentes formatos y fuentes, para que el navegador elija el más adecuado.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descripción de la imagen">
</picture>