Progressive enhancement — это стратегия, при которой вы начинаете с надёжной функциональной основы (семантического HTML, который работает везде), а затем добавляете слои CSS для представления и JavaScript для более богатого функционала — чтобы основной опыт работал даже если верхние слои отказывают.
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);
});
Если JavaScript не загружается (нестабильная сеть, ошибка, заблокирован), форма всё равно работает через встроенное отправление — пользователь может искать. JS только улучшает её.
Progressive enhancement обычно более надёжен, потому что основа гарантированно работает.
Это создаёт стойкие, доступные и производительные сайты: контент находится в HTML (хорошо для SEO, скринридеров и медленных/старых устройств), страница работает без JS или до его загрузки (более быстрая загрузка, работает если скрипт упадёт), и улучшения — это бонус, а не требование.
В мире разнообразных устройств, сетей и сбоев построение на базе работающего HTML-ядра — вместо предположения, что JS всегда работает — держит сайт функциональным для всех.
Современные фреймворки отражают это серверным рендерингом и «платформа работает первой, гидратация улучшает».