Modernizr: Grundlagen
Wenn ich die Suchanfragen dieses Blogs richtig deute, gibt es einen relativ großen Bedarf an (deutschsprachiger) Dokumentation zu Modernizr. Ich versuche mal, diese kleine Javascript-Wunderwaffe zu erklären, so gut ich kann.
Was ist Modernizr?
Modernizr ist eine Javascript-Bibliothek, deren primäre Aufgabe es ist, zu prüfen, ob ein Browser bestimmte HTML5- oder CSS3-Features (aber auch solche, welche nicht einem dieser beiden Standards zuzuordnen sind) nativ unterstützt. Es gibt uns damit die Möglichkeit, auf die Leistungsfähigkeit des Browsers eines Seitenbesuchers individuell zu reagieren, also gegebenenfalls Polyfills einzusetzen oder eine alternative Gestaltung anzuwenden und zwar – und das ist der Clou an Modernizr – eben nicht basierend auf dem sogenannten User Agent (dem nicht sehr zuverlässig zu ermittelnden „Namen“ des Browsers), sondern auf den Ergebnissen diverser Tests, was der Browser tatsächlich beherrscht.
Modernizr testet (derzeit – Version 2.5.3) über 40 Features und stellt basierend auf den Ergebnissen ein Javascript-Objekt bereit, welches die Testergebnisse als true/false-Werte enthält. Zudem fügt es dem html-Element einer Seite eine Reihe von CSS-Klassen hinzu, die ebenfalls anzeigen, ob der Browser die betreffende Eigenschaft nativ unterstützt – also z.B. .boxshadow und .no-boxshadow. Darüber hinaus enthält Modernizr den html5shiv, um veralteten Browsern die neuen HTML5-Elemente „beizubringen“ sowie mit yepnope einen sogenannten Script-Loader, der es ermöglicht, Skripte (aber auch CSS-Dateien) bei Bedarf dynamisch nachzuladen, was einen halbwegs performanten Einsatz von Polyfills möglich macht.
Wie funktioniert Modernizr?
In den meisten Fällen erzeugt Modernizr ein Element, wendet eine bestimmte CSS-Eigenschaft darauf an und fragt besagtes Element ab, was entweder einen sinnvollen Wert oder eben nichts zurückliefert und entsprechend in Werte innerhalb des Modernizr-Objektes bzw. CSS-Klassen umgesetzt wird.
Dabei ist Modernizr relativ leichtgewichtig – minifiziert schlägt ein Modernizr in „Vollausstattung“ mit 17 KB zu Buche. Diesen Wert kann (und sollte) man über den Generator drücken, indem man eine angepasste Version des Skriptes erzeugt, die nur die Tests enthält, die man auch wirklich benötigt. Ebenfalls zu beachten ist, dass der Script-Loader nur über den Generator eingebunden wird; in der Entwicklungsversion ist er nicht enthalten. Ebenso wurde kürzlich respond.js, ein Polyfill für Media-Queries, aus Performance-Gründen aus Modernizr entfernt.
Besagte Tests funktionieren laut Modernizr-Dokumentation in IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome, Mobile Safari, Android WebKit, Opera Mobile, Firefox Mobile und (obschon das offenbar noch nicht ausreichend getestet ist) Blackberry 6+. Damit der html5shiv korrekt umgesetzt wird, sollte man die entsprechenden Anweisungen (wie etwa in normalize.css enthalten) im Stylesheet haben.
Wie benutzt man Modernizr?
Modernizr wird im <head> einer HTML-Datei nach den Stylesheet-Referenzen eingebunden. So ist sichergestellt, dass der html5shiv korrekt funktioniert, bei Nutzung der von Modernizr erzeugten CSS-Klassen wird ein „flash of unstyled content“ zumindest minimiert.
Die gängigste Anwendungen für Modernizr dürfte es sein, über die erzeugten CSS-Klassen alternative Gestaltungen bereit zu stellen. „Ersetzt“ man also z.B. den Rahmen eines div-Elementes mit der ID #logo in modernen Browsern durch box-shadow, kann man diesem Element in alten Browsern über .no-boxshadow #logo { } einen „konventionellen“ border zuweisen. Mittlerweile dürfte in Zeiten des progressive enhancements die Möglichkeit, Polyfills über Modernizr.load nachzuladen, sehr viel nützlicher sein. Darauf möchte ich später in einem separaten Artikel näher eingehen.
Für den Moment sollte man bedenken, dass es nur bedingt eine gute Idee ist, für jedes erdenkliche Feature ein Polyfill nachzuladen. Auch dynamisch nachgeladenen Skripte müssen geladen werden und beeinflussen somit die Ladezeit einer Seite, wenngleich „nur“ in Browsern, welche das Polyfill tatsächlich benötigen.