201102Mär

Yepnope.js: Loader für Fallback-Skripte

Während auf der einen Seite stets neue HTML5- und CSS3-Projekte entstehen, muss auf der anderen Seite die Realität im Auge behalten werden und daher sind moderne Lösungen mit Fallback-Skripten verbunden, die bestimmte Funktionen in älteren Browsern simulieren. Fallbacks, auch Polyfills genannt, sind dabei für die breite Masse der Webbrowser ausgelegt, zu denen vor allem Internet Explorer und auch Firefox 3 gehören. Um festzustellen, ob ein moderner Browser beim Benutzer vorliegt, bieten sich bewährte Skripte wie Modernizr an. Die entsprechenden Polyfills, die moderne Funktionen mehr oder weniger simulieren, finden sich beispielsweise auf dieser Seite.
Ein kleines Skript, mit dem sich gezielt Browser-Funktionen testen lassen, stellt so auch Yepnope dar. Dabei handelt es sich um einen JavaScript-Loader, der Fallback-Skripte erst bei Bedarf lädt oder bestimmte Funktionen ausführt.

yepnope.js - A Conditional Loader For Your Polyfills

Yepnope ist in bestimmten Modernizr-Builds integriert, kann aber auch als Standalone-Skript verwendet werden. Auf der Seite des Skripts finden sich diverse Anwendungsbeispiele und so lassen sich mit Yepnope auch Callbacks ausführen, die nach dem Testen einer Eigenschaft durchgeführt werden. Ein kleines Beispiel, dass die JSON-Fähigkeit des Browsers testet und bei Bedarf ein Polyfill lädt:

  • yepnope({
  • test: window.JSON,
  • nope: "json2.js",
  • complete: function (url, result, key) {
  • var data = window.JSON.parse('{ "json" : "string" }');
  • }
    });

So werden Fallback-Skripte nur dann geladen, wenn sie auch wirklich gebraucht werden. Mit 1,6 KB ist Yepnope in komprimierter Form (GZip, minified) zudem eine schlanke Lösung, die sicher Einsatz in HTML5-Projekten finden dürfte.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong