Was ist Feature Detection?
Nicht jeder Browser kann alles. Ein neues Bildformat, eine frische CSS-Funktion oder eine JavaScript-Schnittstelle laufen in Chrome vielleicht schon, in einem älteren Safari noch nicht. Ohne Vorsorge zeigt die Seite dann leere Flächen oder bricht ab.
Feature Detection, auf Deutsch Funktionserkennung, löst das sauber: Die Seite fragt den Browser, ob er die Funktion beherrscht. Wenn ja, bekommt der Besucher die moderne Variante. Wenn nein, eine Ausweichlösung, den sogenannten Fallback. So funktioniert die Seite überall, statt Fehler zu werfen.
So funktioniert Funktionserkennung
Es gibt drei gängige Wege, je nachdem, was geprüft wird:
- Im HTML: Das Element <picture> bietet mehrere Bildformate an. Der Browser nimmt das erste, das er versteht.
- Im CSS: Mit @supports gilt eine Regel nur, wenn der Browser die Eigenschaft kann. Das funktioniert in allen gängigen Browsern seit September 2015.
- In JavaScript: CSS.supports() oder die Prüfung, ob eine Schnittstelle existiert, entscheidet, welcher Code läuft.
Hilfreich bei der Frage, ob du überhaupt noch prüfen musst, ist Baseline: ein Etikett von Browserherstellern und dem W3C. „Newly available“ heißt, alle Kernbrowser können die Funktion. „Widely available“ heißt, das ist schon 30 Monate so. Dann brauchst du meist keinen Fallback mehr.
Zwei Beispiele aus der Praxis
Fall A · Bilder
AVIF mit Rückfallebene
96,7 %
können AVIF
97,3 %
können WebP
Erst AVIF, dann WebP, zuletzt JPG — der Browser wählt selbst.
Weltweite Werte laut caniuse, Stand Oktober 2026. Die übrigen Besucher bekommen das JPG statt einer leeren Fläche.
Fall B · CSS
Neue Auswahl mit :has()
96,1 %
können :has()
seit 2015
@supports überall
Mit @supports bekommt der Rest eine einfache, aber saubere Variante.
Weltweite Werte laut caniuse, Oktober 2026. @supports ist laut MDN „Widely available“.
Zum Größenverhältnis in Deutschland: Im Oktober 2026 lag Chrome bei rund 58 % Marktanteil, Safari bei knapp 18 %, Firefox und Edge bei je rund 7,5 % (StatCounter, alle Geräte). Wer neue Funktionen nur für Chrome baut, lässt also jeden zweiten bis dritten Besucher außen vor.
Häufige Fehler
Fehler 1 · Den Browser am Namen erkennen
Browser geben sich oft als andere aus, und neue Funktionen kommen laufend dazu. Seit Chrome 113 ist die Kennung, der User-Agent, außerdem stark gekürzt. Wer darauf baut, sperrt Besucher aus, die längst könnten.
Fehler 2 · „Erkannt“ mit „funktioniert“ verwechseln
Ein Test sagt, ob eine Funktion da ist, nicht ob sie fehlerfrei umgesetzt ist. Manche Funktionen lassen sich gar nicht zuverlässig erkennen. Teste die wichtigen Seiten deshalb trotzdem in echten Browsern.
Fehler 3 · Nur prüfen, ob es den Namen gibt
Dass eine Eigenschaft existiert, heißt nicht, dass sie den Wert annimmt, den du brauchst. Je nach Fall musst du einen Wert setzen und prüfen, ob er stehen bleibt.
Fehler 4 · Nachrüst-Code von fremden Servern laden
Ein Polyfill rüstet fehlende Funktionen nach. Im Juni 2024 schleuste der Dienst polyfill.io nach einem Eigentümerwechsel Schadcode in über 100.000 Websites ein. Wenn du Polyfills brauchst, liefere sie von deinem eigenen Server aus — oder lass sie weg, moderne Browser brauchen sie meist nicht mehr.
So setzt du es um
- Erst nachschauen: Auf caniuse.com oder im Baseline-Kasten bei MDN siehst du, wer eine Funktion kann.
- Bilder mit <picture> ausliefern: Viele WordPress-Plugins für Bildoptimierung machen das automatisch.
- CSS mit @supports absichern: Die schicke Variante oben drauf, die einfache als Basis.
- Modernizr nur, wenn nötig: Die bekannte Bibliothek wird noch oft geladen, aber kaum noch weiterentwickelt. Eingebaute Prüfungen reichen meist.
Häufige Fragen
Was ist der Unterschied zwischen Feature Detection und Browser-Erkennung?
Feature Detection fragt, ob der Browser eine bestimmte Funktion beherrscht. Browser-Erkennung fragt, welcher Browser es ist, und rät daraus die Fähigkeiten. Das Erste ist zuverlässig, das Zweite geht häufig schief.
Brauche ich Modernizr noch?
Meist nicht. CSS hat @supports, JavaScript hat CSS.supports() und eigene Prüfungen, Bilder regelt das picture-Element. Modernizr wird kaum noch weiterentwickelt.
Wie liefere ich AVIF aus, ohne alte Browser auszusperren?
Mit dem picture-Element: erst eine AVIF-Quelle, dann WebP, zuletzt ein JPG als normales Bild. Der Browser nimmt das erste Format, das er versteht.
Was bedeutet „Baseline Widely available“?
Eine Funktion läuft seit mindestens 30 Monaten in allen Kernbrowsern: Chrome, Edge, Firefox und Safari auf Desktop und Handy. Dann kannst du sie in der Regel ohne Fallback nutzen.
Hat Feature Detection etwas mit SEO zu tun?
Indirekt. Moderne Bildformate machen Seiten schneller, und eine Seite ohne kaputte Bereiche hält Besucher. Einen direkten Ranking-Effekt der Funktionserkennung selbst gibt es nicht.
