Für Responsive Design-Projekte setzen wir ein paar Hilfsmittel ein, um das Responsive Design über alle Browser hinweg zugänglich zu machen. Eines davon ist Modernizr.
Modernizr ist eine JavaScript-Bibliothek, mit deren Hilfe man HTML5/CSS3 einsetzen kann ohne in Kauf nehmen zu müssen, dass die Website in älteren Browsern nicht richtig funktioniert.

Modernizr überprüft jeden anfragenden Browser gezielt danach, was er leisten kann und was nicht. Das Ergebnis dieser Prüfung wird in einem eigens erzeugten JavaScript-Objekt gespeichert.
Zusätzlich ergänzt Modernizr das HTML-Element um Klassen, die erklären, welche Features unterstützt werden und welche nicht.

Unterstützt werden derzeit IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome; mobil iOS’s mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile und Blackberry 6+.

Polyfills – Spachtelmasse fürs Web

Die Informationen, die Modernizr über den Browser herausgefunden hat, benutzt es jetzt, um die Lücken mit den richtigen Polyfills zu schließen (Polyfilla ist eine in Großbritannien häufig benutzte Spachtelmasse).
Remy Sharp, der den Begriff geprägt hat, definiert das so:

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.

Frei übersetzt: Ein Polyfill oder Polyfiller ist ein Code-Schnipsel oder ein Plugin, das die Technologie bereit stellt, von der man als Entwickler erwartet, dass der Browser sie von sich aus mitbringt. Man könnte sagen, es gleicht die API-Landschaft ab.

Ein Browser ist demnach vergleichbar mit einer Wand voller Risse. Mit der Spachtelmasse werden diese Risse ausgeglichen, die Wand wird schön glatt und einheitlich.

Ein Polyfill ist also ein Script, das Entwicklern erlaubt, Websites nach neuesten technischen Standards zu programmieren. Wenn ein Browser ein bestimmtes Feature nicht unterstützt – beispielsweise IE7 sessionStorage – kommt ein Plugin zum Einsatz, das genau dieses Loch stopft. Der Entwickler braucht sich keine Gedanken mehr darüber zu machen, wie er für den IE7 ein Workaround erstellt.

Mittlerweile gibt es für beinahe jedes HTML5-Feature das geeignete Polyfill zum Absichern.

Wie setze ich Modernizr ein?

Auf der Modernizr-Website kann man zwei Versionen herunterladen:
Zum einen findet man hier die „Development“-Version, die den kompletten Code in einer nicht-komprimierten Version enthält. Wer sich ganz genau anschauen möchte, wie das alles funktioniert oder wer Modernizr gern weiter entwickeln möchte, lädt sich den kompletten Code herunter.
Diese Version ist gut kommentiert, so dass man mit etwas JavaScript-Kenntnissen durchaus versteht, was passiert.

Wer nicht so tief in den Code einsteigen sondern Modernizr schnell für ein konkretes Projekt einsetzen möchte benutzt die „Production“-Version.
Hier kommt man zunächst zu einem Konfigurations-Tool. Anhand einer Auswahlliste kann man sich sein eigenes Modernizr-Päckchen schnüren lassen, das nur die Features enthält, die für das konkrete Projekt gebraucht werden. Ich kann mir zum Beispiel dieses Paket zusammenstellen:

  • CSS3: box-shadow und border-radius
  • HTML5: HTML5 Video, Drag ’n Drop und History.

Zusätzlich kann ich mir Modernizr.load() dazupacken, ein Lade-Tool, das extra für Modernizr entwickelt wurde. Es ermöglicht asynchrone, parallele Ladevorgänge, was Bandbreite spart und die Performance steigert. Mein selbst zusammengestelltes Päckchen umfasst ganze 8 KB.

Jetzt muss ich nur noch das Script im Header nach den Stylesheet-Referenzen einbinden. Im Header, weil es eingebunden werden muss BEVOR der <body> abgearbeitet wird, NACH den Stylesheets, weil Modernizr CSS-Klassen ergänzt.

Fazit

Mit Modernizr können die Schwächen der Browser in Bezug auf HTML5/CSS3 gut abgefangen werden. Es ist möglich, ohne viel Rücksicht konsequent mit moderner Webtechnologie zu arbeiten.

Dennoch ist man gut beraten, genau zu überlegen, wie weit die Perfektion getrieben werden soll. Nutzerfreundlichkeit ist durchaus auch an die Performance gekoppelt. Je mehr Skripte geladen werden müssen, desto langsamer baut sich die Seite auf.

Die wenigsten Besucher schauen sich eine Website in mehr als einem Browser an, so dass kleinere Unterschiede in der Darstellung nicht wichtig sind. Außerdem fallen kleinere Schönheitsfehler nicht so unangenehm auf wie eine Website, die nur schwerfällig lädt.