Progressive Enhancement ist ein Gestaltungsprinzip für Webseiten: Zuerst baut man eine solide Grundfunktion, die in jedem Browser und ohne moderne Technik funktioniert. Danach kommen schrittweise Verbesserungen dazu — für Browser, die sie unterstützen. Inhalt (HTML), Gestaltung (CSS) und Verhalten (JavaScript) bleiben dabei sauber getrennt.
Die drei Schichten
- HTML: Der Inhalt funktioniert immer — ohne CSS, ohne JavaScript, ohne Netzwerk-Feinschaltungen.
- CSS: Gestaltung wird ergänzt, wo sie unterstützt wird. Fehlt sie, bleibt die Seite lesbar.
- JavaScript: Interaktion und Komfort kommen zuletzt. Bricht das Skript aus, funktioniert die Kernfunktion weiter.
Der Vorteil: Die Seite bleibt robust gegenüber älteren Browsern, deaktiviertem JavaScript und langsamen Verbindungen. Das ist auch für die SEO sinnvoll, weil Suchmaschinen-Crawler die Grundinhalte ohne Skriptausführung sehen.
Abgrenzung: Graceful Degradation
Beim Graceful Degradation geht man den umgekehrten Weg: Man baut zuerst die volle Funktionalität und entfernt sie für ältere Umgebungen stufenweise. Progressive Enhancement baut von unten nach oben auf und hinterlässt keine kaputten Zwischenzustände — eine Seite, deren CSS fehlt, ist bei diesem Ansatz immer noch vollständig lesbar.
Praxisbeispiele
- Formulare senden ohne JavaScript per klassischem POST; JavaScript ergänzt nur die Live-Validierung per AJAX.
- Bilder haben immer ein
alt-Attribut und funktionieren ohne moderne Formate. - Offline-Funktionen per Service Worker werden als Zusatz angeboten, nicht als Voraussetzung.
- Navigation bleibt als normale Links umgesetzt — MPA-Stil — und wird erst nachträglich durch SPA-Techniken beschleunigt.
Verwandte Grundlagen: HTML, CSS, JavaScript, Service Worker.