Pojem Progressive enhancement je mezi některými webdesignery značně populární. Česky ho jde přeložit jako progresivní nebo postupné vylepšování.

Podstata je v tom, že se stránka vytváří nejprve tak, aby rozumně fungovala i v prehistorických zařízeních a postupným vylepšováním se přidávají funkce pro nová zařízení.

Web tedy nejprve počítá s tím, že se zobrazí jen v HTML podobě, následně, že se povede i aplikování CSS a nakonec i rozšiřující efekty v JavaScriptu.

Postup je zajistit funkci v pořadí:

1. HTML,
2. CSS,
3. JavaScript

To je výhodné tím, že HTML a CSS jsou oproti JavaScriptu tolerantnější k chybám.

Shodná funkčnost

Myšlenka postupného vylepšování nehlásá stejnou funkčnost napříč prohlížeči, ale aby stránka nebo její kritické části fungovaly pokud možno i ve velmi starých prohlížečích.

Novější prohlížeče potom mohou dostat lepší funkčnost díky JavaScriptu.

Je to trochu jiný přístup, než používat různé hacky a polyfilly pro starší prohlížeče. Autor webu se zkrátka smíří s tím, že se stránka v nepodporovaném prohlížeči bude chovat trochu jinak.

Proč je to dobré

Při dodržování progressive enhancementu (tj. zejména fungování bez JavaScriptu) zpravidla získá člověk následující užitečné vlastnosti:

• Výkon: rychlejší první vykreslení.
• SEO: indexovatelný obsah v HTML.
• Odolnost: web funguje i při částečných výpadcích (JS se nestáhne nebo je v něm chyba).

Základní principy

• HTML-first: sémantické značky, skutečné odkazy a formuláře.
• CSS vrstva: vzhled a rozvržení bez zásahu do funkce.
• JS jako bonus: vylepšení interakcí, ne nutná podmínka.
• Detekce funkcí: používat feature detection, ne User-Agent hlavička.
• Serverové fallbacky: akce musí jít provést i bez JS.

Postupné vylepšování vs. graceful degradation

Postupné vylepšování začíná u minima a přidává schopnosti. Graceful degradation začíná u maxima a snaží se „nějak přežít“ v horších podmínkách.

Příklad: akční odkaz s vylepšením v JS

Nejprve funkční HTML odkaz. Na serveru musí existovat obsluha akce i pro GET/POST.

<a class="btn-like" href="/like?id=123">👍 Přidat k oblíbeným</a>

Poté přidání pohodlnější interakce přes fetch. Bez JS vše dál funguje přes odkaz.

const likeLink = document.querySelector('.btn-like');
if (likeLink) {
  likeLink.addEventListener('click', async (e) => {
    e.preventDefault();
    const url = likeLink.getAttribute('href');
    const res = await fetch(url, { method: 'POST' });
    if (res.ok) likeLink.textContent = 'Přidáno';
  });
}

Příklad: formulář s AJAX vylepšením

Formulář je plně funkční bez JS:

<form action="/feedback" method="post">
  <input name="message" required>
  <button type="submit">Odeslat</button>
</form>

Vylepšení přidá AJAX odeslání a textové potvrzení:

const form = document.querySelector('form[action="/feedback"]');
if (form) {
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const res = await fetch(form.action, { method: form.method, body: new FormData(form) });
    if (res.ok) form.replaceWith(document.createTextNode('Děkujeme za zpětnou vazbu'));
  });
}

Ideální je, když základní věci jako odkazy a formuláře dokáže forvnou řešit framework použitý na webu. Pro tvůrce stránky to tak nemusí znamenat žádnou pracnost navíc.

Detekce funkcí

• V CSS použít @supports pro pokročilejší styly.
• V JS použít 'něco' in window, CSS.supports apod.

if ('fetch' in window && 'FormData' in window) {
}
if (CSS && CSS.supports && CSS.supports('position', 'sticky')) {
  document.documentElement.classList.add('has-sticky');
}

CSS příklad vylepšení

Základ je jednoduchý sloupec. V prohlížečích s podporou @supports a CSS Grid se rozvržení vylepší na responsivní mřížku.

.cards { display: block; }
.card { margin-bottom: 1rem; }
@supports (display: grid) {
  .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .card { margin: 0; }
}

Kontrolní seznam

• Odkazy mají href, tlačítka mají správný type.
• Formuláře mají action, method a fungují bez JS.
• Obsah je čitelný v čistém HTML bez CSS.
• Vylepšení se zapínají až po detekci možností.
• Chyby v JS neblokují načtení a použití stránky.

Nevýhody progressive enhancementu

Přístup má i slabiny a nehodí se vždy a všude.

• Vyšší nároky na vývoj: často se implementují dvě cesty téže akce (bez JS a s JS).
• Nároky na backend: je potřeba mít serverové fallbacky pro akce, které by jinak řešil jen klient.
• Ne vždy vhodné: čistě aplikační UI (např. komplexní SPA, realtime nástroje) mohou být na JS závislé.
• Rozdíly v UX: záměrně odlišná zkušenost napříč prohlížeči může zvyšovat zátěž podpory.
• Testování: je třeba pokrýt kombinace (bez JS / s JS, s/bez vybraných funkcí).
• Limity technologií: některé schopnosti nemají smysluplné základy bez JS (např. WebGL, přístup k médiím).

Závěr

Postupné vylepšování dává přednost pevným osvědčeným základům webu, nad které se přidávají vylepšené funkce pro moderní prohlížeče.

Dodržením základních principů se moc zkazit nemůže, je ale otázka jestli a jak je přijatelná různá funkčnost napříč prohlížeči.

Odkazy

• Paul Kinchla: JavaScript is a Ghost
• MDN: Progressive enhancement
• Smashing Magazine: Progressive Enhancement: What It Is, And How To Use It