Progressive enhancement

Aus SELFHTML-Wiki
(Weitergeleitet von Graceful degradation)
Wechseln zu: Navigation, Suche

Progressive Enhancement (fortlaufende Verbesserung) bedeutet: Eine Webseite soll immer gut funktionieren, egal welchen Browser oder welches Gerät jemand benutzt.

Darum baut man die Webseite in verschiedenen Schichten:

Grundschicht
Alle Nutzer – auch mit alten Browsern oder schwacher Internetverbindung – bekommen den Inhalt und die wichtigen Funktionen.
Zusatzschicht
Nutzer mit neueren Browsern und höheren Übertragungsraten ohne Datenlimit erhalten eine verbesserte Version mit zusätzlichen Effekten.
  • Layout durch externe Stylesheets
    • Animationen, schöne Effekte.
  • zusätzliche Interaktivität durch unobtrusive JavaScript
  • Browserwahl und -Einstellungen der Nutzer werden respektiert

Das Ziel ist:
Jede Person kann die Webseite benutzen – und je besser das Gerät oder der Browser ist, desto mehr Komfort bekommt der Nutzer.

Beispielsweise sollte ein Formular so erstellt werden, dass es sich auch ohne JavaScript absenden lässt und ohne CSS einen Sinn ergibt, auch wenn nicht alle von JavaScript-abhängigen Ausfüll-Hilfen funktionieren und es nicht „schick“ aussieht.

Graceful degradation

Als graceful degradation (englisch für elegante Verschlechterung, würdevolle Herabstufung) wird im HTML-Umfeld die Eigenschaft einer Webseite bezeichnet, auf Fehler unter Erhalt der Funktionalität angemessen zu reagieren.

Schematische Darstellung von Graceful Degradation
Desktop first, das dann für schmale Viewports angepasst wird. 
/* Desktop-first */
.sidebar {
  width: 300px;
  float: left;
}

.animated-header {
  animation: fadeIn 2s ease-in-out;
}

img {
  width: 800px;
}

/* Try to fix for mobile afterward */
@media (width < 600px) {
  .sidebar.large-only {
    display: none;   /* Entire navigation disappears! */
  }

  .animated-header {
    animation: none; /* Remove animations */
  }

  img {
    width: 100%;  /* Override desktop width */
  }
}

Häufig gibt es bereits eine Webseite mit für Desktop optimierten CSS. Um diese Webseite jetzt für mobile Geräte anzupassen, müssen wir wieder viel Arbeit hineinstecken:

  • die komplexen Desktop-Funktionen müssen für Mobilgeräte wieder deaktiviert werden
  • anschließend das Layout mithilfe von „Patch-CSS” neu organisieren
  • ganze Funktionen (wie das Menü) ausblenden
  • große Bilder durch kleinere ersetzen musste.

Dies führt zu:

  • aufgeblähtem CSS
  • schlechter Leistung in langsamen Mobilfunknetzen
    (Desktop-Bilder werden zuerst geladen und dann verkleinert)
  • verwirrendem Code
    („Warum ist das hier deaktiviert?”)

Progressive Enhancement

Das Prinzip des Progressive Enhancement (fortlaufende Verbesserung) stellt die Herangehensweise von „Graceful Degradation“ auf den Kopf und gilt heute zu Recht als moderner und sinnvoller Ansatz. Ganz neu ist diese Methode jedoch nicht.

Beim „Progressive Enhancement“ steht immer zuerst der eigentliche Inhalt der Website im Mittelpunkt. Erst darauf aufbauend kümmert man sich um Gestaltung, Browserkompatibilität und Anpassungen für verschiedene Bildschirmgrößen. Dadurch rückt der inhaltliche und konzeptionelle Aufbau stärker in den Vordergrund, während visuelle und technische Verbesserungen später hinzukommen.

Schematische Darstellung von Progressive Enhancement
Mobile first — simple layout 
.sidebar {
  display: none;
}

img {
  width: 100%;
}

/* Progressive enhancement */
@media (width > 40em) {
  .sidebar {
    display: block;
    width: 20em;
  }

  img {
    max-width: 50em;
  }
}

Im Mobile First-Ansatz benötigen wir nur wenige CSS-Festlegungen. Bilder erhalten 100% Breite, damit sie auf schmalen Geräten nicht aus dem Viewport herausragen.

Erst wenn der Screen breit genug ist, den Inhalt nebeneinander darzustellen, wird eine media query eingerichtet, die die Sidebar einblendet.

Das so entstandende CSS ist …

  • sauberer
  • übersichtlicher, da weniger Festlegungen wieder überschrieben werden
  • standardmäßig responsiv

Workflow mit Progressive Enhancement

Im ersten Schritt werden die Inhalte gesammelt und strukturiert. Anschließend wird die Website entwickelt. Wenn in dieser elementaren Version alle Informationen dargestellt werden und die Website benutzbar ist, wird das Projekt für leistungsstarke Browser erweitert.

Inhalt, Darstellung und Verhalten sollten in dieser Reihenfolge berücksichtigt werden


Hierbei kommen dann auch komplexere Technologien und umfangreichere Layouts zum Einsatz.

Neue CSS-Eigenschaften

Mit der corner-shape-Eigenschaft, kann man eingedellte Ecken realisieren. Sie ist seit langem spezifiziert, wird leider aber noch nicht von allen Browsern unterstützt.

Eingewölbte Ecken mit corner-shape 
aside {
	border-radius: 2em;
	corner-shape: bevel;
}

aside h2 {
	border-radius: 1em;
	corner-shape: scoop;
	padding-inline: 1em;
}

Die aside-Box erhält einen border-radius von 2em.

Alle Inhalte werden angezeigt, die Ränder werden abgerundet. Ältere Browser, die corner-shape nicht kennen, ignorieren die ihnen unbekannte Eigenschaft.

Browser, die die neue Eigenschaft bereits unterstützen, erhalten neue Eck-Formen als Progressive Enhancement.

oklch() - logischere Farben

In den letzten Monaten habe ich immer öfter die gar nicht mehr so neue oklch()-Notation für Farben verwendet. Helligkeit, Sättigung und – mit ein bisschen Übung - Farbton können so auf einen Blick erkannt werden:

mehrfache Angaben als Fallback für ältere Browser 
body {
    background-color: green;
    background-color: oklch(0.5 0.18 140);
}


Dieses Beispiel enthält zwei Angaben für den Hintergrund. Zuerst wird in der background-color-Eigenschaft der Wert für eine flächige Hintergrundfarbe mit einem Farbnamen im RGB-Farbraum festgelegt. Diese Deklaration wird durch die Festlegung eines Farbwerts mit der oklch()-Funktion überschrieben.

Ältere Browser, die diesen Farbraum nicht kennen, ignorieren die ihnen unbekannte Eigenschaft.

→ Farbe/Farbmodelle

Feature Detection

Ein wichtiger Bestandteil von Progressive Enhancement ist die Abfrage vorhandener Browser-Funktionen (Feature Detection). Die elementare Version der Website wird so entwickelt, dass sie auf dem schlechtesten vorstellbaren System funktioniert. Anschließend wird geprüft, ob weitere Funktionen, z. B. JavaScript oder bestimmte CSS-Eigenschaften, vom Browser unterstützt werden.

Wenn das der Fall ist, werden diese Technologien genutzt um den Funktionsumfang und die Darstellung der Website zu verbessern. Diese Vorgehensweise führt zwangsläufig dazu, dass eine Website nicht in allen Browsern gleich aussieht. Auch vor diesem Hintergrund ist es daher nicht mehr sinnvoll mit dem Layout der Website zu beginnen.

@supports

Im Stylesheet finden sich anfangs nur grundlegende Formatierungen:

Style der Cards 
.card {
  padding: 1rem;
  border: thin solid;
}

Jetzt verbessern wir das Design. Durch @supports wirkt das nur, wenn der Browser CSS Grid unterstützt:

Abweichende Formatierung, falls Grid unterstützt wird 
@supports (display: grid) {
  .card {
    display: grid;
    grid-template-columns: 10em 1fr;
    gap: 1rem;
    border-radius: 0.5rem;
  }
}

Feature-Erkennung mit JavaScript

Ein einfacher Link funktioniert bereits ohne JavaScript:

Ein ganz normaler Link 
  <a href="peru-3.jpg">
  	<img src="peru-3-sm.jpg" alt="Peru 2007: Machu Picchu">
  </a>

Wenn der Browser das Dialogelement unterstützt, bieten wir ein schöneres modales Popup-Fenster an.

Feature-Erkennung 
if ("HTMLDialogElement" in window) {
  const dialog = document.querySelector("dialog");
  const items = document.querySelectorAll(".gallery-item");

  items.forEach(item => {
    item.addEventListener("click", e => {
      e.preventDefault();
      dialog.querySelector("img").src = item.href;
      dialog.showModal();
    });
  });
}

Das Script überprüft, ob der Browser über HTMLDialogElement verfügt.

Wenn ja → erweiterte JavaScript-Funktionalität aktivieren.

Wenn nein → der Benutzer erhält weiterhin das Standardverhalten eines Links.

Eigentlich ist dieses Beispiel auch schon wieder überholt, das dialog-Element ist in allen Browsern angekommen - so können wir aber unseren Bildwechsler bewerben:

→ Bilder im Internet/Bildwechsler


Fazit: Warum dies für Progressive Enhancement wichtig ist

  • Wir beginnen mit Inhalten, die immer funktionieren (HTML).
  • Wir fügen CSS/JS nur hinzu, wenn diese unterstützt werden.
    Ältere Browser bleiben nutzbar, moderne Browser erhalten ein Upgrade.
  • Die Website bleibt immer benutzbar, da wir keine Funktionen voraussetzen, die möglicherweise nicht vorhanden sind.

Siehe auch

  • Trennung von Inhalt, Präsentation und Verhalten


    … erklärt, welche Rollen die Techniken HTML, CSS und JavaScript spielen.

     
  • Responsiv(es Webdesign)
    Brad-Frost-this-is-not-the-web.png
     

Weblinks

Abgerufen am 12.12.2025
von "http://wiki.selfhtml.org/wiki/Progressive_enhancement"