Czym jest progressive enhancement?

Question

Accepted Answer

**Progressive enhancement** to strategia budowania od solidnej, funkcjonalnej **podstawy** (semantycznego HTML, który działa wszędzie), a następnie *nałożenia* CSS na warstwę prezentacji i JavaScript na warstwę bogatszych zachowań — dzięki czemu doświadczenie podstawowe działa, nawet jeśli górne warstwy zawodzą. ## Trzy warstwy ```text 1. HTML → content + functionality (works with no CSS/JS) 2. CSS → presentation/layout (enhances appearance) 3. JS → interactivity (enhances behavior) ``` ## Konkretny przykład: formularz ```html ``` ```js // 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); }); ``` Jeśli JavaScript nie załaduje się (słaba sieć, błąd, zablokowany), formularz **wciąż działa** poprzez natywne wysłanie — użytkownik może nadal wyszukiwać. JS tylko go *ulepsza*. ## Progressive enhancement a graceful degradation - **Progressive enhancement** — zacznij od podstawy, buduj *w górę*. (Od dołu do góry.) - **Graceful degradation** — zacznij od pełnej wersji, upewnij się, że *degraduje się* akceptowalnie. (Od góry do dołu.) Progressive enhancement jest ogólnie bardziej niezawodne, ponieważ podstawa ma gwarancję działania. ## Dlaczego to ważne Tworzy odporne, dostępne i wydajne witryny: zawartość znajduje się w HTML (dobra dla SEO, czytników ekranu i wolnych/starych urządzeń), strona jest użyteczna przed/bez JS (szybsze dostrzeżone ładowanie, działa jeśli skrypt zawiedzie), a ulepszenia to bonus, a nie wymóg. W świecie zróżnicowanych urządzeń, sieci i awarii budowanie na działającym rdzeniu HTML — zamiast założenia, że JS zawsze działa — utrzymuje witrynę użyteczną dla wszystkich. Nowoczesne frameworki odzwierciedlają to za pomocą server-side renderingu i "platforma działa pierwsza, hydratacja ulepsza."