M

MLOG

Deutsch

Bauen Sie robuste, zugängliche Web-Apps mit Progressive Enhancement & Funktionserkennung. Dieser Guide bietet globale Perspektiven, Beispiele & Best Practices für zukunftssichere Weberlebnisse.

Progressive Enhancement: Funktionserkennung – Widerstandsfähige Weberlebnisse für ein globales Publikum schaffen

In der sich ständig weiterentwickelnden Internetlandschaft ist es von größter Bedeutung, dass Ihre Webanwendungen zugänglich, leistungsfähig und zukunftssicher sind. Eine der effektivsten Strategien, dies zu erreichen, ist das Progressive Enhancement, eine Designphilosophie, die den Aufbau von Kernfunktionalität betont, die auf einer Vielzahl von Geräten und Browsern funktioniert, während Erweiterungen basierend auf den Fähigkeiten der Benutzerumgebung hinzugefügt werden. Ein entscheidender Bestandteil des Progressive Enhancement ist die Funktionserkennung, die es Entwicklern ermöglicht zu bestimmen, ob ein Browser eine bestimmte Funktion unterstützt, bevor sie implementiert wird. Dieser Ansatz garantiert eine konsistente Benutzererfahrung, insbesondere in der vielfältigen technologischen Landschaft der Welt.

Was ist Progressive Enhancement?

Progressive Enhancement ist eine Webentwicklungsstrategie, die mit einer soliden, zugänglichen Grundlage beginnt und dann erweiterte Funktionen hinzufügt, je nachdem, was der Browser oder das Gerät zulässt. Dieser Ansatz priorisiert Inhalte und Kernfunktionalität für alle Benutzer, unabhängig von ihrem Gerät, Browser oder ihrer Internetverbindung. Er vertritt die Idee, dass das Web für jeden, überall, nutzbar und informativ sein sollte.

Die Kernprinzipien des Progressive Enhancement umfassen:

Warum Funktionserkennung unerlässlich ist

Die Funktionserkennung ist der Eckpfeiler des Progressive Enhancement. Anstatt sich auf Browser-Sniffing (Identifizierung des Browsers des Benutzers basierend auf dessen User-Agent-String) zu verlassen, konzentriert sich die Funktionserkennung darauf, was der Browser *kann*. Dies ist ein wesentlich zuverlässigerer Ansatz, weil:

Methoden zur Funktionserkennung

Es gibt verschiedene Methoden zur Erkennung von Browserfunktionen, jede mit ihren Stärken und Schwächen. Die gängigste Methode verwendet JavaScript, um das Vorhandensein einer bestimmten Funktion oder API zu überprüfen.

1. JavaScript zur Überprüfung von Funktionen verwenden

Diese Methode ist die am weitesten verbreitete und flexibelste. Sie überprüfen die Verfügbarkeit einer bestimmten Browserfunktion mithilfe von JavaScript-Code.

Beispiel: Überprüfung der `fetch`-API (JavaScript zum Abrufen von Daten aus dem Netzwerk)


if ('fetch' in window) {
  // The 'fetch' API is supported. Use it to load data.
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // Process the data
    })
    .catch(error => {
      // Handle errors
    });
} else {
  // The 'fetch' API is not supported. Use a fallback like XMLHttpRequest.
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Process the data
    } else {
      // Handle errors
    }
  };
  xhr.onerror = function() {
    // Handle errors
  };
  xhr.send();
}

In diesem Beispiel überprüft der Code, ob die Eigenschaft `fetch` im `window`-Objekt vorhanden ist. Falls ja, unterstützt der Browser die `fetch`-API, und der Code kann sie verwenden. Andernfalls wird ein Fallback-Mechanismus (mittels `XMLHttpRequest`) implementiert.

Beispiel: Überprüfung der `classList`-API-Unterstützung


if ('classList' in document.body) {
  // Browser supports classList.  Use classList methods (e.g., add, remove)
  document.body.classList.add('has-js');
} else {
  // Browser does not support classList. Use alternative methods.
  // e.g., using string manipulation to add and remove CSS classes
  document.body.className += ' has-js';
}

2. CSS-Funktionsabfragen (`@supports`) verwenden

CSS-Funktionsabfragen, die durch die `@supports`-Regel gekennzeichnet sind, ermöglichen es Ihnen, CSS-Regeln anzuwenden, je nachdem, ob der Browser bestimmte CSS-Funktionen oder Eigenschaftswerte unterstützt.

Beispiel: Verwendung von `@supports` zum Gestalten eines Layouts mittels Grid Layout


.container {
  display: flex; /* Fallback for browsers without grid */
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

In diesem Beispiel verwendet der `.container` initial ein `flex`-Layout (eine weit verbreitete Funktion). Die `@supports`-Regel prüft, ob der Browser `display: grid` unterstützt. Falls ja, werden die Stile innerhalb der Regel angewendet, wodurch das anfängliche Flex-Layout mit einem Grid-Layout überschrieben wird.

3. Bibliotheken und Frameworks

Verschiedene Bibliotheken und Frameworks bieten integrierte Funktionen zur Funktionserkennung oder Dienstprogramme, die den Prozess vereinfachen. Diese können die Komplexität der Überprüfung auf spezifische Funktionen abstrahieren. Häufige Beispiele sind:

Beispiel: Modernizr verwenden


<html class="no-js" >
<head>
  <!-- Other meta tags, etc. -->
  <script src="modernizr.min.js"></script>
</head>
<body>
  <div class="my-element"></div>
  <script>
    if (Modernizr.borderradius) {
      // Apply border-radius styles
      document.querySelector('.my-element').style.borderRadius = '10px';
    }
  </script>
</body>
</html>

In diesem Szenario fügt Modernizr die Klasse `borderradius` zum ``-Element hinzu, wenn der Browser `border-radius` unterstützt. Der JavaScript-Code überprüft dann diese Klasse und wendet den entsprechenden Stil an.

Praktische Beispiele und globale Überlegungen

Lassen Sie uns einige praktische Beispiele für die Funktionserkennung und deren Implementierung untersuchen, unter Berücksichtigung globaler Aspekte wie Barrierefreiheit, Internationalisierung (i18n) und Leistung.

1. Responsive Bilder

Responsive Bilder sind unerlässlich, um optimale Bildgrößen basierend auf dem Gerät und der Bildschirmgröße des Benutzers bereitzustellen. Die Funktionserkennung kann eine entscheidende Rolle bei deren effektiven Implementierung spielen.

Beispiel: Überprüfung der Unterstützung für `srcset` und `sizes`

`srcset` und `sizes` sind HTML-Attribute, die dem Browser Informationen über die Bildquellenoptionen liefern, sodass er das am besten geeignete Bild für den aktuellen Kontext auswählen kann. 


<img
  src="image-fallback.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1024w"
  sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
  alt="Description of the image"
>

Das `srcset`-Attribut gibt eine Liste von Bildquellen mit ihren Breiten an. Das `sizes`-Attribut liefert Informationen über die beabsichtigte Anzeigegröße des Bildes basierend auf Medienabfragen.

Wenn der Browser `srcset` und `sizes` nicht unterstützt, können Sie JavaScript und Funktionserkennung verwenden, um ein ähnliches Ergebnis zu erzielen. Bibliotheken wie `picturefill` bieten ein Polyfill für ältere Browser.


if (!('srcset' in document.createElement('img')) || !('sizes' in document.createElement('img'))) {
  // Use a polyfill like picturefill.js
  // Link to picturefill: https://scottjehl.github.io/picturefill/
  console.log('Using picturefill polyfill');
}

Dieser Ansatz stellt sicher, dass alle Benutzer optimierte Bilder erhalten, unabhängig von ihrem Browser.

2. Web-Animationen

CSS-Animationen und -Übergänge können die Benutzererfahrung erheblich verbessern, aber sie können für einige Benutzer auch ablenkend oder problematisch sein. Die Funktionserkennung ermöglicht es Ihnen, diese Animationen nur dann bereitzustellen, wenn es angebracht ist.

Beispiel: Unterstützung für CSS-Übergänge und -Animationen erkennen


if (Modernizr.cssanimations && Modernizr.csstransitions) {
  // Apply animation classes
  document.body.classList.add('animations-enabled');
} else {
  // Use a static UI or a more basic experience without animations
  document.body.classList.add('animations-disabled');
}

Indem Sie Animationen für Benutzer mit älteren Browsern deaktivieren oder wenn der Benutzer eine Präferenz für reduzierte Bewegung geäußert hat (über die `prefers-reduced-motion` Medienabfrage), können Sie ein flüssigeres und inklusiveres Erlebnis bieten.

Globale Überlegungen zu Animationen: Bedenken Sie, dass einige Benutzer Vestibularstörungen oder andere Bedingungen haben könnten, die durch Animationen ausgelöst werden können. Bieten Sie immer eine Option zum Deaktivieren von Animationen an. Respektieren Sie die `prefers-reduced-motion`-Einstellung des Benutzers.

3. Formularvalidierung

HTML5 führte leistungsstarke Formularvalidierungsfunktionen ein, wie z. B. Pflichtfelder, Eingabetypvalidierung (z. B. E-Mail, Nummer) und benutzerdefinierte Fehlermeldungen. Die Funktionserkennung ermöglicht es Ihnen, diese Funktionen zu nutzen und gleichzeitig elegante Fallbacks bereitzustellen.

Beispiel: Überprüfung der HTML5-Formularvalidierungsunterstützung


if ('checkValidity' in document.createElement('input')) {
  // Use HTML5 form validation.
  // This is built-in, and doesn't require JavaScript
} else {
  // Implement JavaScript-based form validation.
  // A library such as Parsley.js can be useful:
  // https://parsleyjs.org/
}

Dies stellt sicher, dass Benutzer mit älteren Browsern weiterhin eine Formularvalidierung erhalten, auch wenn diese mit JavaScript implementiert wird. Erwägen Sie die Bereitstellung einer serverseitigen Validierung als letzte Schicht für Sicherheit und Robustheit.

Globale Überlegungen zur Formularvalidierung: Stellen Sie sicher, dass Ihre Fehlermeldungen lokalisiert und zugänglich sind. Bieten Sie klare, prägnante Fehlermeldungen in der Sprache des Benutzers an. Berücksichtigen Sie, wie verschiedene Datums- und Zahlenformate global verwendet werden.

4. Fortgeschrittene Layout-Techniken (z. B. CSS Grid)

CSS Grid Layout bietet eine leistungsstarke Möglichkeit, komplexe, responsive Layouts zu erstellen. Es ist jedoch wichtig sicherzustellen, dass ältere Browser elegant behandelt werden.

Beispiel: CSS Grid mit einem Fallback verwenden


.container {
  display: flex;  /* Fallback for older browsers */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

Dieser Code verwendet `flexbox` als Fallback für Browser, die `grid` nicht unterstützen. Wenn der Browser `grid` unterstützt, wird das Layout mit Grid gerendert. Dieser Ansatz schafft ein responsives Layout, das in älteren Browsern elegant abfällt.

Globale Überlegungen zum Layout: Entwerfen Sie für verschiedene Bildschirmgrößen, Seitenverhältnisse und Eingabemethoden (z. B. Touchscreens, Tastaturnavigation). Testen Sie Ihre Layouts auf verschiedenen Geräten und Browsern, die weltweit verwendet werden. Berücksichtigen Sie die Unterstützung von Rechts-nach-Links-Sprachen (RTL), wenn Ihr Zielpublikum Benutzer umfasst, die RTL-Schriften lesen (z. B. Arabisch, Hebräisch).

Best Practices für die Funktionserkennung

Um die Effektivität der Funktionserkennung zu maximieren, halten Sie sich an diese Best Practices:

Barrierefreiheit (a11y) in der Funktionserkennung berücksichtigen

Barrierefreiheit ist ein entscheidender Bestandteil des Progressive Enhancement. Die Funktionserkennung kann dazu beitragen, dass Ihre Website für Benutzer mit Behinderungen zugänglich ist.

Internationalisierung (i18n) und Funktionserkennung

Beim Aufbau einer globalen Website sollten Sie die i18n berücksichtigen. Die Funktionserkennung kann zu Ihren i18n-Bemühungen beitragen, indem sie sprachspezifische Inhalte und Verhaltensweisen ermöglicht.

Fazit: Für die Zukunft bauen

Progressive Enhancement und Funktionserkennung sind nicht nur technische Praktiken; sie sind grundlegende Prinzipien der Webentwicklung, die es Ihnen ermöglichen, inklusive, leistungsfähige und widerstandsfähige Weberlebnisse für ein globales Publikum zu schaffen. Durch die Übernahme dieser Strategien können Sie Websites erstellen, die sich an die sich ständig ändernde technologische Landschaft anpassen und sicherstellen, dass Ihre Inhalte für alle Benutzer zugänglich und ansprechend sind, unabhängig von ihrem Gerät, Browser oder Standort. Indem Sie sich auf die Kernfunktionalität konzentrieren, die Funktionserkennung nutzen und die Barrierefreiheit priorisieren, schaffen Sie ein robusteres und benutzerfreundlicheres Weberlebnis für alle.

Während sich das Web weiterentwickelt, wird die Bedeutung des Progressive Enhancement nur noch zunehmen. Indem Sie diese Praktiken heute anwenden, investieren Sie in die Zukunft Ihrer Webanwendungen und sichern deren Erfolg im globalen digitalen Ökosystem.

Handlungsanleitungen: