Progressive enhancement è una strategia che consiste nel partire da una baseline solida e funzionante (HTML semantico che funziona ovunque) e poi aggiungere in livelli CSS per la presentazione e JavaScript per comportamenti più ricchi — in modo che l'esperienza core funzioni anche se i livelli superiori falliscono.
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);
});
Se JavaScript non riuscisse a caricarsi (rete instabile, errore, bloccato), il form funzionerà comunque tramite il submit nativo — l'utente può ancora fare una ricerca. JS lo potenzia soltanto.
Il progressive enhancement è generalmente più robusto perché la fondazione è garantita funzionare.
Produce siti resilienti, accessibili e performanti: il contenuto è nell'HTML (buono per SEO, screen reader e dispositivi lenti/vecchi), la pagina è utilizzabile prima/senza JS (caricamento percepito più veloce, funziona se uno script fallisce), e i potenziamenti sono un bonus piuttosto che un requisito.
In un mondo di dispositivi, reti e fallimenti vari, costruire su un core HTML funzionante — piuttosto che assumere che JS funzioni sempre — mantiene un sito utilizzabile per tutti.
I framework moderni rispecchiano questo con rendering server-side e "la piattaforma funziona prima, l'hydration potenzia."