Modernizr - Feature-Detection für jedermann

Modernizr - Feature-Detection

Die sogenannte Feature-Detection ist der Job der JavaScript Bibliothek Modernizr.

Man stellt fest ob bestimmte Funktionen (HTML5 oder CSS3) im vorliegenden Browser unterstützt werden und kann entsprechend z.B. mit Hilfe von Polyfills darauf reagieren.

Zunächst müssen wir uns eine Kopie der Bibliothek Modernizr beschaffen.

Modernizr kann auf der offiziellen Modernizr-Website heruntergeladen werden. Wenn man den Production-Build wählt, hat man im man im nächsten Schritt die Möglichkeit Features auszuwählen, die man voraussichtlich benötigt.

Wer z.B. jetzt schon weiß, dass er nie mit SVG, SQl oder anderen Features zu tun haben wird, der kann getrost darauf verzichten und die Dateigröße entsprechend klein halten.

JS Einbinden

Nachdem wir die Datei nun auf unseren Server geladen haben, binden wir diese, wie üblich im Quellcode ein:

<script src="modernizr.js" type="text/javascript"></script>

Nach dem Modernizr ordnungsgemäß läuft, ergänzt die Bibliothek standardmäßig das HTML-Element mit bestimmten CSS-Klassen um Elemente einfacher je nach Unterstützung ansprechen zu können. Je nachdem welche Features man im Build übernommen hat, können das natürlich mehr oder weniger Klassen sein.

Auf dem Mac und Firefox schaut der HTML Tag z.B. folgendermaßen aus:

<html class=" js no-flexbox flexboxlegacy
canvas canvastext webgl
no-touch geolocation postmessage
no-websqldatabase indexeddb hashchange history
draganddrop websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius boxshadow
textshadow opacity cssanimations csscolumns cssgradients
no-cssreflections csstransforms csstransforms3d
csstransitions fontface generatedcontent video audio
localstorage sessionstorage webworkers applicationcache
svg inlinesvg smil svgclippaths">

In meinem Beispiel Standort auf der Google Map mit der HTML5 Geolocation API anzeigen nutze ich Modernizr um die Möglichkeit einer Geolocationabfrage zu checken.

Dazu reicht eine simple IF-Abfrage

if (Modernizr.geolocation) {
}

Wenn man also jetzt feststellt, dass ein Feature nicht unterstützt wird, kann man entweder einfach eine Meldung ausgeben, oder noch besser mit Hilfe sogeannnter Polyfills den vorliegenden Browser "pimpen" man rüstet quasi Funktionalitäten nach.

Beispiel um Media Queries für den IE 8 nachzurüsten:

Wir benötigen ein Polyfill namens css3-mediaqueries.js welches wir im HTML entsprechend einbinden, wenn die Modernizr Abfrage mq() false liefert. Die lässt sich noch viel genauer gliedern, für das Beispiel gehen wir aber nur auf die grundlegende Funktionalität ein, ob überhaupt Media Queries unterstützt werden.

<script>
if (!Modernizr.mq()) {
 <script src="css3-mediaqueries.js" type="text/javascript"></script>
}
</script>

Fazit

Modernizr ist eine tolle Sache um im WirrWarr der Browserhersteller mit all ihren Eigenheiten den Überblick zu behalten. Allerdings lohnt sich der Einsatz von Modernizr nicht immer. Manche Funktionen kann man auch einfach für ältere Browser weglassen. Jede zusätzliche JS-Datei bedeutet eine längere Ladezeit. Für viele kleinere Websites ist der Einsatz solcher größeren Bibliotheken evtl. etwas "overdressed" wenn der Einsatz sich z.B. nur darauf beschränken sollte ob jetzt box-shadow o.ä. verfügbar ist.