Graceful Degradation ist eine Bauweise, bei der eine Website in voller Ausstattung entworfen wird und für den Fall vorsorgt, dass beim Besucher etwas davon fehlt. Fehlt eine CSS-Eigenschaft, eine JavaScript-Schnittstelle oder eine Schriftart, verliert die Seite an Komfort und bleibt lesbar und bedienbar. Der Begriff stammt aus der Systemtechnik und beschreibt dort den kontrollierten Teilausfall einer Anlage.
- Graceful Degradation
Bauweise, bei der eine Website von der Vollausstattung ausgeht und festlegt, was bei fehlenden Voraussetzungen erhalten bleibt.
Beispiel: „Ohne CSS Grid stehen die Karten untereinander, lesen lässt sich die Seite weiterhin: Graceful Degradation.“Auch: sanfter Funktionsabbau. Die deutsche Form ist selten, im Projektalltag bleibt es beim englischen Begriff.
Abgrenzung: Progressive Enhancement kommt von der anderen Seite. Graceful Degradation setzt den fertigen Entwurf voraus und beantwortet die Frage, was davon wegfallen darf, ohne dass die Seite unbrauchbar wird. Damit ist es der übliche Weg, wenn eine Seite bereits existiert.
Browser ignorieren, was sie nicht kennen
Der Abbau ist im Web schon eingebaut. Trifft ein Browser auf eine CSS-Deklaration, die er nicht versteht, verwirft er genau diese Zeile und behält den Wert davor. Ein Rückfallwert lässt sich deshalb einfach voranstellen, und mit der Abfrage @supports wird die Bedingung ausdrücklich.
/* Erst der Rückfallwert, dann die neue Eigenschaft */
.karten { display: block; }
@supports (display: grid) {
.karten { display: grid; gap: 1.5rem; }
}Damit steht die einfache Anordnung fest, bevor die neue Eigenschaft überhaupt geprüft wird. Dasselbe Muster trägt an vielen Stellen: das video-Element mit Text zwischen den Tags, das picture-Element mit einem img als letzter Möglichkeit, eine Systemschrift als letzter Eintrag im font-family-Stapel.
Wo die Grenze zu Progressive Enhancement verläuft
Beide Ansätze zielen auf dasselbe Ergebnis und unterscheiden sich in der Reihenfolge der Entscheidungen. Graceful Degradation beginnt beim fertigen Entwurf und arbeitet sich nach unten durch: Was passiert, wenn diese eine Voraussetzung fehlt? Die Antwort fällt für jede Funktion einzeln an, und sie fällt oft spät, weil die Frage erst im Test auftaucht.
Daraus ergibt sich das bekannte Risiko. Die reduzierte Fassung entsteht nebenbei und wird selten angesehen, bis sich jemand darüber beschwert. Wir empfehlen deshalb, für jede Funktion, die auf einer neuen Browser-Eigenschaft beruht, den Rückfall einmal bewusst anzuschauen, am besten auf einem älteren Gerät.
Wann der Weg von oben der richtige ist
Bei bestehenden Seiten ist Graceful Degradation meist der einzige praktikable Weg. Ein Relaunch mit übernommenen Templates lässt sich selten von unten neu aufbauen, und eine einzelne neue CSS-Eigenschaft in einem fertigen Projekt braucht nur ihren Rückfallwert.
Für neue Projekte empfehlen wir die andere Richtung, weil die Grundfassung dann von selbst entsteht und sich später nicht rekonstruieren lassen muss. Wer beides mischt, hält die Entscheidung am besten pro Funktion fest. So bleibt auch nach Jahren nachvollziehbar, welcher Zustand als Rückfall gedacht war.