Progressive enhancement ialah strategi membina daripada garis dasar yang kukuh dan berfungsi (HTML semantik yang berfungsi di mana-mana) dan kemudian melapisi CSS untuk persembahan dan JavaScript untuk gelagat yang lebih kaya — supaya pengalaman teras berfungsi walaupun lapisan atas gagal.
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);
});
Jika JavaScript gagal dimuatkan (rangkaian tidak stabil, ralat, disekat), borang itu masih berfungsi melalui penghantaran asli — pengguna masih boleh membuat carian. JS hanya meningkatkannya.
Progressive enhancement secara amnya lebih teguh kerana asasnya dijamin berfungsi.
Ia menghasilkan laman yang berdaya tahan, boleh dicapai, dan berprestasi: kandungan berada dalam HTML (bagus untuk SEO, pembaca skrin, dan peranti lama/perlahan), halaman boleh digunakan sebelum/tanpa JS (muat persepsi lebih pantas, berfungsi jika skrip mengalami ralat), dan peningkatan menjadi bonus dan bukan keperluan.
Dalam dunia pelbagai peranti, rangkaian, dan kegagalan, membina di atas teras HTML yang berfungsi — dan bukannya mengandaikan JS sentiasa berjalan — mengekalkan sesebuah laman boleh digunakan untuk semua orang.
Rangka kerja moden menggemakan ini dengan rendering sebelah pelayan dan "platform berfungsi dahulu, hidrasi meningkatkan".