La mejora progresiva es una estrategia de construir desde una base sólida y funcional (HTML semántico que funciona en todas partes) y luego añadir capas de CSS para la presentación y JavaScript para un comportamiento más rico — de modo que la experiencia central funciona incluso si las capas superiores fallan.
1. HTML → content + functionality (works with no CSS/JS)
2. CSS → presentation/layout (enhances appearance)
3. JS → interactivity (enhances behavior)
<!-- Layer 1: works on its own — submits to the server, full page reload -->
<form action="/search" method="get">
<input name="q" type="search" required />
<button>Search</button>
</form>
// Layer 3: IF JS is available, enhance it into a live AJAX search
form.addEventListener("submit", (e) => {
e.preventDefault(); // upgrade to fetch — no reload
fetchResults(form.q.value);
});
Si JavaScript falla al cargar (red inestable, error, bloqueado), el formulario aún funciona a través del envío nativo — el usuario aún puede buscar. JavaScript solo lo mejora.
La mejora progresiva es generalmente más robusta porque la base está garantizada que funcione.
Produce sitios resilientes, accesibles y de alto rendimiento: el contenido está en HTML (bueno para SEO, lectores de pantalla y dispositivos lentos/antiguos), la página es utilizable antes/sin JS (carga percibida más rápida, funciona si un script falla), y las mejoras son un bonus en lugar de un requisito.
En un mundo de dispositivos, redes y fallos variados, construir sobre un núcleo HTML funcional — en lugar de asumir que JS siempre se ejecuta — mantiene un sitio utilizable para todos.
Los frameworks modernos hacen eco de esto con representación del lado del servidor e "la plataforma funciona primero, la hidratación mejora".