Feature Detection gegenüber Browser-Sniffing
Verwenden Sie Feature Detection statt User-Agent-Sniffing
Feature Detection gegenüber Browser-Sniffing ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Zwei Ansätze für Kompatibilität
Um festzustellen, ob der aktuelle Browser ein Feature unterstützt, können Sie entweder das Feature direkt erkennen ("IntersectionObserver" in window) oder die User-Agent-Zeichenfolge auswerten (navigator.userAgent.includes("Chrome")). Eine Methode ist zuverlässig, die andere verursacht seit Langem immer wieder Fehler.
Warum die Auswertung von User-Agents fehlschlägt
User-Agent-Zeichenfolgen sind nicht zuverlässig. Edge gibt sich als Chrome aus (sowie als Safari und Firefox). Chrome unter Android sendet einen anderen UA als Chrome unter iOS. Browser respektieren das „Einfrieren“ der UA-Zeichenfolge zum Schutz der Privatsphäre. Jede Logik, die auf UA-Zeichenfolgen basiert, versagt alle paar Monate.
Muster für Feature Detection
Prüfen Sie die konkrete API, die der Code benötigt: if ("IntersectionObserver" in window) { ... }. Wenn die Eigenschaft existiert, unterstützt der Browser sie; andernfalls verwenden Sie den Fallback-Pfad. Die Prüfung ist direkt, schnell und zukunftssicher.
if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver(handler);
} else {
loadPolyfill().then(() => { /* use IntersectionObserver */ });
}Erkennen, dann verwenden
Verbinden Sie die Erkennung mit einem echten Fallback. Das Erkennen eines fehlenden Features ist nur dann sinnvoll, wenn Sie etwas unternehmen können, sobald es fehlt – etwa ein Polyfill laden, eine statische Alternative rendern oder das Feature vollständig ausblenden.
CSS-Feature-Abfragen
CSS verfügt über eine eigene Feature Detection: @supports (display: grid) { ... }. Der Block wird nur angewendet, wenn der Browser das Eigenschaft-Wert-Paar versteht. Verwenden Sie dies, um Grid-Layouts mit Float-basierten Fallbacks für veraltete Browser bereitzustellen.
@supports (display: grid) {
.grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
.grid > * { float: left; width: 33%; }
}User-Agent Client Hints
Moderne Browser stellen strukturierte Informationen über navigator.userAgentData bereit (nur Chromium). Statt einer frei formbaren Zeichenfolge werden Marken-Versions-Paare zurückgegeben. Bevorzugen Sie weiterhin Feature Detection – UA Hints sind nur dann sinnvoll, wenn sich die Fähigkeit nicht anhand einer Eigenschaftsprüfung ermitteln lässt.
Wann die Auswertung von User-Agents vertretbar ist
Der eng begrenzte gültige Anwendungsfall für die Erkennung per UA besteht darin, fehlerhafte Browser auszuschließen: etwa einen bekannten Fehler in iOS Safari in Version X. Bevorzugen Sie auch dann funktionsbasierte Ausschlüsse (CSS.supports("aspect-ratio: 1")). Die Erkennung per UA sollte das letzte Mittel sein.
Bibliotheken nach dem Modernizr-Prinzip
Modernizr bündelt zahlreiche Feature-Erkennungen und stellt sie als Klassen am <html>-Element bereit (html.flexbox, html.no-flexbox). Moderne Projekte benötigen es nur selten – die meisten Erkennungen bestehen aus einer einzigen Codezeile –, für die Migration älterer Projekte bleibt es jedoch nützlich.
Den Fallback testen
Sobald die Erkennung eingerichtet ist, testen Sie beide Pfade. Öffnen Sie die DevTools, setzen Sie das Feature auf undefined und überprüfen Sie, ob der Fallback funktioniert. Ungetestete Fallbacks veralten – wenn Benutzer sie benötigen, versagen sie häufig auf eine Weise, die sich der Entwickler nie vorgestellt hat.
Erkennung in Frameworks
React, Vue und andere Frameworks bieten keine spezielle API zur Erkennung – verwenden Sie einfaches JavaScript innerhalb eines Effekts oder bei der Initialisierung der Komponente. Serverseitig gerenderte Anwendungen müssen die Erkennung clientseitig durchführen, da "IntersectionObserver" in window während des SSR undefined ist.
Vermeiden Sie die fähigkeitsbasierte UA-Auswertung
Manche Teams prüfen den UA, um Fähigkeiten zu vermuten („Ist dies ein iPhone? Dann gibt es wahrscheinlich Touch.“). Dadurch werden zwei voneinander unabhängige Dinge gleichgesetzt. Erkennen Sie Touch direkt über "ontouchstart" in window oder bevorzugen Sie besser Pointer Events, die von der Eingabemethode abstrahieren.
Wissensfrage
Warum wird zur Behandlung von Browserfähigkeiten die Feature Detection der Auswertung des User-Agents vorgezogen?
Zusammenfassung
Bevorzugen Sie Feature Detection ("API" in window) gegenüber der Auswertung des User-Agents. CSS bietet für denselben Zweck @supports. Verbinden Sie die Erkennung immer mit einem echten Fallback und testen Sie beide Pfade. Die Auswertung des User-Agents sollte bekannten fehlerhaften Browserversionen vorbehalten bleiben und niemals zum Vermuten von Fähigkeiten verwendet werden.
Häufig gestellte Fragen
Ist die Lektion „Feature Detection gegenüber Browser-Sniffing“ kostenlos?
Ja — der vollständige Text von „Feature Detection gegenüber Browser-Sniffing“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Feature Detection gegenüber Browser-Sniffing“?
Verwenden Sie Feature Detection statt User-Agent-Sniffing Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Feature Detection gegenüber Browser-Sniffing“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die PE-Philosophie: Mit HTML beginnen
- Feature Detection gegenüber Browser-Sniffing
- Graceful Degradation gegenüber Progressive Enhancement
- Ein PE-Akkordeon erstellen