Was ist der Modernizr?

Bei der Entwicklung einer Webseite nach modernstem Standard ist es leider so, dass nicht jeder Browser alle neuen Komponenten von CSS3 oder HTML5 unterstützt. Zudem gibt es unzählige Möglichkeiten welche Version eines Browsers der Webseitenbesucher gerade benutzt. Hier kommt der Modernizr ins Spiel. Der Modernizr ist eine JavaScript-Bibliothek, die zwar nicht modernisiert 😉 aber diagnostiziert.

Wenn man den Modernizr eingebunden hat, fragt dieser beim Browser an, ob er die gewünschte Komponente schon kennt, woraufhin der Browser dann eine diesbezügliche Antwort gibt. Als Antwort gibt er eine entsprechende Klasse aus, die man wiederum per CSS stylen kann. Okay, das klingt kompliziert, ist aber ganz einfach.

Beispiel

In einem Webprojekt soll eine teilweise transparente Hintergrundfarbe für ein Element mit der Klasse box mithilfe der Eigenschaft rgba vorgegeben werden. Aber kann RGBA jeder Browser? Beim Aufrufen der Seite erhält nun der Browser die Anfrage, ob er die Eigenschaft rgba unterstützt. Als Antwort gibt der eine Klasse im html-Tag aus, die entweder .rgba heißt wenn er das untertützt oder .no-rgba wenn er das nicht unterstützt. Dementsprechend kann man nun dem box-Element mit der Klasse rgba die gewünschten Eigenschaften zuweisen und sich für die Klasse no-rgba eine andere Alternative überlegen.

Modernizr herunterladen

Als Entwicklungsergänzung lädt man sich am besten erst Mal das Komplettpaket herunter. Dieses bekommt man wenn man auf der Modernizr-Website den Button DEVELOPMENT anlickt. Wenn man später mit dem Projekt fertig ist, sollte man nur das abfragen, was auf der Website auch wirklich benötigt wird. Dazu gibt es auf der gleichen Website den Button PRODUCTION. Klicken Sie darauf, gelangen Sie auf die gleiche Seite wie vorher, nur das Sie hier nur genau die Komponenten anhaken können, die Sie im Code verwendet haben. Danach können Sie Ihr „benutzerspezifisches Modernizr-Script“ generieren lassen und herunterladen.

Modernizr einbinden

Der Modernizr wird im head der HTML-Datei eingebunden. Da der Modernizr ein JavaScript ist, funktioniert er leider nicht, wenn JavaScript im Browser deaktiviert ist. Das heißt, die Klasse no-rgba wird dann gar nicht erstellt. Um diesen Fall auch noch abzudecken, kann man eine Fallback-Lösung einbauen. Dazu gibt man dem html-Tag die Klasse no-js:

Dadurch gekommt das html-Tag die Klasse no-js, wenn JavaScript inaktiv ist. Als nächsten Schritt vergibt man in der CSS-Datei dieser Klasse die entsprechenden Werte: