¿Qué hago si una nueva etiqueta o atributo HTML no funciona en un navegador antiguo?

Cuando una nueva etiqueta o atributo HTML no funciona en un navegador antiguo, es un desafío común. La estrategia general es asegurar que tu sitio siga siendo usable y accesible, aplicando principios de mejora progresiva (progressive enhancement) y degradación elegante (graceful degradation).

Aquí tienes varias técnicas y consideraciones:

1. Mejora progresiva (Preferida):
   Construye una base sólida con HTML que funcione en todos los navegadores (incluidos los más antiguos). Luego, añade mejoras (nuevas etiquetas, atributos, CSS3, JavaScript moderno) que los navegadores más capaces podrán aprovechar. Los navegadores antiguos simplemente ignorarán las características que no entiendan, pero el contenido y la funcionalidad básica seguirán estando disponibles.
2. Contenido de respaldo (Fallback Content):
   Para elementos como <video>, <audio> o <canvas>, puedes incluir contenido alternativo directamente dentro de las etiquetas. Los navegadores modernos mostrarán el elemento HTML5, mientras que los antiguos mostrarán el contenido de respaldo.
3. Polyfills y Shivs (o Shims):
   • Un polyfill es un fragmento de código JavaScript que implementa la funcionalidad de una característica web moderna en navegadores más antiguos que no la soportan de forma nativa. Por ejemplo, polyfills para fetch, Promise, o incluso para ciertos tipos de <input>.
   • Un shiv (como el famoso «html5shiv.js») es un tipo específico de polyfill que ayuda a los navegadores antiguos (especialmente IE < 9) a reconocer y permitir el estilizado de los nuevos elementos semánticos de HTML5 (como <article>, <section>, <header>, etc.). Sin esto, IE antiguo los trataría como elementos desconocidos, dificultando su estilización con CSS.
   Puedes cargar estos scripts condicionalmente o incluirlos en tu paquete de JavaScript.
4. Detección de características (Feature Detection) con JavaScript:
   Antes de usar una API de JavaScript asociada a una nueva característica HTML, comprueba si el navegador la soporta. Si no, puedes ofrecer una alternativa o simplemente no ejecutar el código que causaría errores.
5. Estilos CSS de respaldo:
   Cuando uses propiedades CSS modernas para estilizar nuevos elementos o atributos, asegúrate de proporcionar estilos base o de respaldo que los navegadores más antiguos puedan entender, para que la página al menos se vea aceptable.
6. Ignorancia benigna de los navegadores:
   Los navegadores están diseñados para ignorar etiquetas y atributos que no reconocen. Un atributo desconocido simplemente no tendrá efecto. Una etiqueta desconocida suele ser tratada como un <span> (si no tiene hijos de bloque) o un <div> genérico. Puedes usar CSS para definir cómo deben mostrarse estos elementos (ej. article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } para asegurar que los elementos de sección HTML5 se traten como bloques en navegadores muy antiguos que no lo hacen por defecto).
7. Define tu nNivel de soporte:
   Utiliza herramientas como caniuse.com para ver qué navegadores soportan las características que quieres usar. Decide qué navegadores antiguos necesitas soportar basándote en tu audiencia (usa tus analíticas web). A veces, no vale la pena el esfuerzo de implementar polyfills complejos para un porcentaje muy pequeño de usuarios con navegadores obsoletos, y una degradación elegante es suficiente.

Al combinar estas estrategias, puedes utilizar características HTML modernas mientras aseguras que tu sitio siga siendo funcional y accesible para usuarios con navegadores más antiguos.