Progressive Enhancement: Contenido Básico y Funciones Avanzadas

¿Qué es Progressive Enhancement?

Progressive enhancement es un enfoque en el desarrollo web que comienza con el 'peor caso' (navegador menos capaz) y mejora la experiencia con las funciones soportadas.

Principio central: El contenido y la funcionalidad básica siempre deben funcionar. JavaScript, CSS y las funciones avanzadas de HTML mejoran la experiencia pero no son necesarias.

Opuesto a graceful degradation: Graceful degradation comienza con la mejor experiencia y se degrada en entornos de baja capacidad. Progressive enhancement comienza con la experiencia básica y mejora.

Ventajas: Mayor acceso de usuarios, mejor rendimiento, mejor SEO, mejor accesibilidad.

Capas Fundamentales

HTML (contenido): Contenido básico y estructura con HTML semántico. Legible y usable sin JavaScript.

CSS (presentación): Los estilos básicos funcionan en todos los navegadores. Las funciones avanzadas de CSS se aplican condicionalmente con @supports.

JavaScript (comportamiento): La funcionalidad básica proporcionada por formularios HTML. JavaScript agrega UX mejorada (AJAX, animación).

Cada capa se construye sobre la anterior. Si una capa inferior falla, las capas superiores también fallan pero la funcionalidad básica se preserva.

Enfoque HTML First

HTML semántico: Use los elementos HTML correctos. <button>, <a>, <form>, <input>, <nav>, <main>, <article>.

Formularios: Cree formularios que funcionen sin JavaScript. Procesamiento del lado del servidor con atributos action y method.

Enlaces: Use enlaces <a href="..."> reales. Haga routing del lado del cliente con JavaScript pero proporcione routing del lado del servidor como fallback.

NoScript: Muestre contenido alternativo con la etiqueta <noscript> cuando JavaScript está deshabilitado.

Progressive Web App: Service Worker y manifest se agregan cuando el sitio básico funciona. El sitio básico funciona sin JavaScript.

CSS Progressive Enhancement

@supports: Estilizado condicional con CSS feature query. @supports (display: grid) { .container { display: grid; } }.

Fallback: El estilo básico funciona en todos los navegadores. Las funciones avanzadas se aplican en navegadores que las soportan.

Ejemplo: .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 si las variables no son soportadas. color: blue; color: var(--primary, blue);.

JavaScript Progressive Enhancement

Detección de características: Verifique las capacidades del navegador con Modernizr o detección nativa de características.

Polyfill: Agregue características faltantes (fetch, Promise, IntersectionObserver) con polyfill. Use core-js o polyfill.io.

Graceful degradation: La funcionalidad básica debe preservarse si JavaScript falla. Capture errores con try/catch.

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

Lazy loading: Cargue de forma lazy las funciones avanzadas (animación, widget interactivo). El contenido básico se carga inmediatamente.

Pruebas y Evaluación

Prueba con JavaScript deshabilitado: Deshabilite JavaScript en el navegador. ¿Funciona la funcionalidad básica?

Prueba de conexión lenta: Pruebe con 3G o WiFi lento. ¿Se carga el contenido a tiempo?

Prueba de navegador antiguo: Pruebe con IE11, Safari/Chrome antiguo. ¿Funciona la funcionalidad básica?

Lighthouse: Verifique las puntuaciones de Accessibility y Best Practices. Progressive enhancement mejora estas puntuaciones.