Modernizr: So verwendest du die Javascript-Library richtig
In fast allen Projekten, die ich bisher realisiert habe, kam ein Tool zum Einsatz: die Javascript-Library Modernizr. Sie zeichnet sich vor allem dadurch aus, dass Anweisungen für HTML5 und CSS3 als auch Fallbacks für neue Javascript-Funktionen erstellt werden können.
Hier einige Fakten zu Modernizr:
- 40 CSS3 und HTML5 Features werden getestet
- Ergebnisse werden unter „Modernizr“ im Javascript-Object abgelegt
- Beschreibung der verwendbaren und nicht unterstützten Features
Wie wird Modernizr verwendet?
Die Verwendung von Modernizr ist so einfach wie genial: Lade zuerst die aktuelle Version von Modernizr (derzeit 2.6.2) herunter und stelle diese in deinen Javascript-Ordner (ich erstelle dafür einen Ordner mit dem Namen „js“).
Diese JavaScript-Datei wird wie jede JavaScript-Datei in die Webseite eingebunden.
Als Nächstes erstellen wir im html-Tag noch eine CSS-Klasse. Warum dieser HTML-Tag eine Klasse mit dem Inhalt "no-js" erhält, erkläre ich gleich.
Ist im Browser des Besuchers kein Javascript aktiviert, bleibt die css-Klasse mit dem Inhalt no-js bestehen, diese sagt uns, dass wir kein Javascript zur Verfügung haben.
Falls Javascript aktiviert ist ersetzt die Modernizr-Library automatisch diese Klasse mit den Möglichkeiten die wir mit diesem Browser haben. Hier ein Beispiel wie dies aussieht: (Chrome Version 26.0)
Im Internet Explorer 7 sieht dies dann wie folgt aus:
Fallback für CSS3 & HTML5 Feature
Um mit diesen Klassen nun ein Fallback zu erstellen, hast du zwei Möglichkeiten.
Bei der ersten Möglichkeit kannst du direkt per CSS auf die Klassen im HTML-Tag zugreifen. Bei der zweiten Möglichkeit greifst du auf das bereits erwähnte Javascript Objekt Modernizr zurück und ladest so ein Fallbackscript.
Die Variante mittels CSS
Hier folgt ein kleiner Beispiel, wie dies aussehen könnte: In den neueren Browsern gibt es bereits eine sehr gute Unterstützung von SVG. Nur noch wenige Browser – wie der Internet Explorer 7 und 8 – unterstützen dies nicht. Um hier einen Fallback zu erstellen, sind nur wenige Zeilen nötig, in denen ein Header, je nach Browser eine SVG oder für ältere eine JPG, als background-image eingebunden wird.
.header { background-image:url('img/header.jpg'); background-repeat: no-repeat; background-position: center center; width: 100px; height: 100px; } .svg .header { background-image:url('img/header.svg'); }
Wie oben in den Klassen des HTML-Tags ersichtlich, findet sich in den modernen Browsern die Klasse „svg“. In Browsern, wie dem Internet Explorers 7, die keine SVG-Untersützung haben, findet sich die Klasse „no-svg“. Ist die Klasse „svg“ vorhanden, kannst du mittels „.svg“ das html-Dokument und somit die Klasse „header“ mit den svg-Daten überschreiben.
Die Fallbackvariante für Javascript
Stell dir vor, du hast einen Slider erstellt, der sowohl auf dem Touchscreen als auch auf den herkömmlichen PC's hervorragend funktionieren soll. Als nächsten Schritt musst du für Touchscreens einen anderen Slider als für den PC laden.
Modernizr.load({ test: Modernizr.touch, yep : 'js/touch-slider.js', nope: 'js/default-slider.js', });
Hier wird mittels dem Objekt Modernizr überprüft, ob es sich bei dem benutzten Medium um einen Touchscreen handelt. Wurde ein Touchscreen erkannt (yep), wird die Javascript-Datei "js/touch.js" eingebunden. Andernfalls wird die abgelehnte Datei, die unter (nope) angegeben wurde, eingebunden. Dies ist natürlich auch mittels css-Dateien möglich.
Fazit
Modernizr kann zwar alten Browsern keine CSS3- oder HTML5-Features beibringen, aber es erleichtert die Arbeit sehr, wenn Webseiten für alle Browser angepasst werden. Klar, die Entwicklungszeit einer Webseite verlängert sich stark, wenn für alles ein Fallback erstellt werden muss; dennoch empfehle ich die Modernizr-Library vor allem für Webseiten mit sehr hohem Traffic.
Weiterführende Informationen zu Modernizr findest du hier.