Progressive enhancement egy olyan stratégia, amely egy szilárd, funkcionális alapból (szemantikus HTML, amely mindenhol működik) indul, majd réteget ad CSS-hez a bemutatáshoz és JavaScript-hez a gazdagabb viselkedéshez — így az alapvető élmény működik még akkor is, ha a felső rétegek meghibásodnak.
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);
});
Ha a JavaScript nem tölti be (instabil hálózat, hiba, letiltva), az űrlap továbbra is működik a natív küldésen keresztül — a felhasználó továbbra is kereshet. A JS csak javítja azt.
A progressive enhancement általában robusztusabb, mert az alapok működésre garantáltak.
Rugalmas, hozzáférhető, teljesítményes webhelyeket produkál: a tartalom a HTML-ben van (jó az SEO-hoz, képernyőolvasókhoz és lassú/régi eszközökhöz), az oldal a JS előtt/anélkül használható (gyorsabb felsorolt betöltés, működik, ha egy parancsfájl meghibásodik), és a fejlesztések bónusz helyett követelmény.
Változatos eszközök, hálózatok és hibák világában, egy működő HTML-mag felépítésével — ahelyett, hogy azt feltételeznénk, hogy a JS mindig fut — a webhely mindenki számára használható marad.
A modern keretrendszerek ezt server-side renderinggel és "a platform először működik, a hidratálás javít" szólamával tükrözik.