Modernizr 2 - eierlegende Wollmilchsau?

Die Javascript-Bibliothek Modernizr hat Version 2 erreicht und damit ein paar ziemlich beeindruckende Neuerungen eingeführt, die Frontend-Entwicklung damit noch mehr zum Vergnügen machen.

Was macht Modernizr?

Vereinfacht gesagt stellt das kleine Javascript-Wunder verschiedene Test bereit, die prüfen, ob eine bestimmte Funktionalität (HTML5 oder CSS3) im jeweiligen Browser zur Verfügung steht. Damit wird es sehr leicht, alternative Gestaltungen oder Lösungen (sogenannte Polyfills) einzubinden.

Was ist neu in Version 2?

• Media query-Tests: Testen, ob der Browser Media queries unterstützt, bestimmte Ressourcen (CSS/JS) abhängig von bestimmten Bildschirmdimensionen laden
• Ressourcen nachladen: Über den (im Modernizr integrierten!) Loader yepnope können CSS- oder JS-Dateien abhängig von bestimmten Testergebnissen nachgeladen werden
• Präfix-Tests: Es gibt neue Tests für die sogenannten vendor prefixes, also proprietäre CSS-Erweiterungen einzelner Browser

Darüber hinaus kann man Modernizr in der neuen Version um eigene Tests erweitern sowie sich über das Build-Tool eine angepasste Version abholen, welche nur die tatsächlich benötigten Tests enthält.

Ein einfaches Beispiel

Modernizr.load([
    {
        test: Modernizr.fontface && !Modernizr.touch,
        yep: "font/myfont.css",
    },
    {
        load: "//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js",
        complete: function () {
            if (!window.jQuery) {
                Modernizr.load("js/libs/jquery-1.6.1.min.js");
            }
        },
    },
    {
        test: Modernizr.mq("only all and (max-width:480px)"),
        yep: "css/smartphone.css",
    },
]);

Dieses Beispiel (den Code hängt man an die modernizr.js an) lädt:

1. ein Stylesheet, wie es zu den Webfont-Kits von FontSquirrel gehört – aber nur in Browsern, die Webfonts unterstützen und nicht auf Touchscreen-Geräten
2. jQuery vom Google-CDN oder, falls das scheitert, eine lokale Kopie als Fallback
3. ein Stylesheet für Smartphones nur in Browsern, deren Viewport mindestens 480 Pixel breit ist

Das demonstriert natürlich nur einen Bruchteil der Fähigkeiten von Modernizr, um den Rahmen dieses Artikels nicht zu sprengen. Man kann also mit Version 2 dank yepnope-Integration nun Polyfills, aber auch CSS/JS für bestimmte Umgebungen dynamisch nachladen. Genial einfach, einfach genial.

Äh, und ohne Javascript?

Bei deaktiviertem Javascript JS-Dateien nachzuladen ist ohnehin komplett sinnfrei – das Zauberwort heißt hier unobtrusive JS, also die gängige Praxis, Seiten so zu bauen, dass sie auch ohne JS zugänglich und benutzbar sind. Genauso sollte man natürlich auch nur CSS-Dateien per Modernizr.load nachladen, die verzichtbar sind bzw. die nur innerhalb der Test-Bedingung notwendig sind.