It’s #FrontendFriday – Browser Feature Checks mit Modernizr
Heute ist Freitag und jeden 2. Woche heißt das: es ist #Frontend-Friday!
Im heutigen #FrontendFriday geht es um Browser Feature Checks mit JavaScript bzw. CSS. Vermutlich jeder Frontend-Entwickler stand schon einmal vor der Herausforderung zu prüfen, ob ein bestimmtes Browser Feature – oder eine Browser-API – verfügbar ist. Die Herausforderung dabei: alle Features oder APIs müssen auf unterschiedlichste Art und Weisen geprüft werden. Das erfordert viel Aufwand und somit auch wertvolle Entwicklungszeit – wenn man es „von Hand“ macht.
Wir bei doubleSlash sind jedoch stets bestrebt, möglichst effizient und effektiv zu Entwickeln. Deshalb möchte ich euch heute eine unserer Lieblings-JavaScript-Libraries vorstellen: Modernizr.
Modernizr Logo, Quelle: https://modernizr.com/
Prüfungen mit JavaScript
Wenn man beispielsweise mit JavaScript überprüfen möchte, ob der Browser das HTML5-Feature Canvas unterstützt, kann das im Quellcode – achtung, Negativbeispiel – so aussehen:
function isCanvasSupported() {
var canvasElem = document.createElement('canvas');
return !!canvasElem.getContext('2d');
}
Doch genau dieses Problem behebt für euch Modernizr. Die gleiche Prüfung sieht mit Modernizr nämlich wie folgt aus:
Modernizr.canvas
Das war alles. Ein Einzeiler. Mit Modernizr spart man sich also nicht nur das zeitaufwendige Implementieren von eigenen Prüfmethoden und riskiert evtl. Bugs in diesen Methoden, sondern auch viele Zeilen Code! Und genauso einfach geht auch die Prüfung anderer Features:
- Unterstützt der Browser die Geolocation? →
Modernizr.geolocation - Unterstützt der Browser das Forcetouchevent? →
Modernizr.forcetouch - Unterstützt der Browser die Vibration API? →
Modernizr.vibrate
…die komplette Liste findest du hier.
Prüfungen mit CSS
Die Information, ob ein bestimmtes Feature verfügbar ist oder nicht, stellt euch Modernizr nicht nur in JavaScript, sondern auch in CSS zur Verfügung. D.h. man kann auch über die folgenden CSS-Klassen von Modernizr auf das Canvas-Feature reagieren:
.canvas .div { color: green; }
.no-canvas .div { color: red; }
Und genauso geht es auch anders herum: CSS-Features in CSS und/oder JavaScript prüfen. Möchte man z.B. prüfen, ob der Browser CSS-Filter unterstützt, geht das in CSS über die folgenden bereitgestellten Klassen:
.cssfilters .div { color: green; }
.no-cssfilters .div { color: red; }
In JavaScript könnt ihr auf die Unterstützung von CSS-Filtern so reagieren:
if (Modernizr.cssfilters) {
// CSS filter
} else {
// No CSS filter
}
Zusammengefasst kann man also alle Features sowohl in JavaScript, als auch CSS (über Klassen) überprüfen.
Stell dir deinen eigenen Modernizr-Build zusammen
Modernizr bietet vor der Integration in euer Projekt die Möglichkeit, nur die Feature-Detections in einen eigenen Build zu packen, die ihr auch benötigt: https://modernizr.com/download?setclasses
Doch selbst, wenn ihr alle Features auswählt, kommt Modernizr gerade einmal auf schlanke 91 kB. Pro ausgewähltem Feature kommen also ca. 336 Byte zusammen.
Fazit
Modernizr ist die beste Möglichkeit um einfach, sicher und effizient Browser Features zu überprüfen. Ernst zunehmende Alternativen zu Modernizr existieren Stand heute nicht. Dies unterstreicht, dass Modernizr längst die Standard-Library für Feature-Detection ist. Deshalb von mir eine klare Empfehlung zum Einsatz in Projekten.
