Modernizr: API

Zum Abschluss der kleinen Reihe über Modernizr noch ein paar Dinge, die vielleicht über den alltäglichen Einsatz hinausgehen oder nicht für jeden Webentwickler interessant sind – API-Methoden und Möglichkeiten, Modernizr zu erweitern.

Prefixed

Hersteller-Präfixe in CSS sind ein (derzeit) viel diskutiertes Thema. Wie alle anderen CSS-Eigenschaften gibt es auch für diese ein Äquivalent in Javascript, allerdings etwas anders implementiert: Ohne Bindestrich und case-sensitiv. In Javascript wird also aus -moz-transform z.B. MozTransform.

Die Methode Modernizr.prefixed ermöglich es, auf das vom jeweiligen Browser benutzte Präfix zu testen und somit zur Laufzeit nur auf dieses zu reagieren – was eine Menge Code einsparen kann. Die Methode liefert die vollständige Präfixform in Javascript-Format als String zurück. Sie kann noch etwas mehr, auf das ich hier allerdings nicht weiter eingehen möchte – es gibt aber einen sehr ausführlichen ausführlichen Artikel von Andi Smith dazu.

Media Queries

Gerade in Zeiten des Responsive Web Design kann es absolut Sinn machen, Skripte in Abhängigkeit von bestimmten Dimensionen des Bildschirms auszuführen – also im Prinzip das zu tun, was Media Queries in CSS leisten. Das geht etwas primitiver bereits in nacktem Javascript, indem man screen.width abfragt, aber Modernizr.mq stellt hier als Javascript-Methode etwas mehr bereit.

Es testet ein als String übergebenes Media Query, welches einen Typ enthalten sollte und einen Wert enthalten muss, also z.B. Modernizr.mq('only screen and min-width:480px'), zur Laufzeit gegen den aktuellen Zustand des Browserfensters und liefert true/false zurück.

(Und genauso kann man natürlich auch andere Werte des Modernizr-Objektes als Testbedingungen in Javascript verwenden.)

Erweiterungen schreiben

Wer Modernizr erweitern möchte (so weit überhaupt noch nötig, siehe unten), findet auch dafür einige API-Methoden vor. Ich spare es mir, das entsprechende Beispiel aus der Modernizr-Dokumentation hier zu zitieren – angesichts der bereits zur Verfügung stehenden Community-Erweiterungen wird es vorerst kaum nötig sein, eigene zu schreiben.

Falls doch, bietet die API Methoden, um Tests anzulegen (wobei sich die API um das Anlegen der CSS-Klassen und Werte im Modernizr-Objekt kümmert), das so erzeugte Test-Element auf Styles und Events zu testen und dabei auch Browser-Präfixe zu berücksichtigen.

Unerkennbares

Es gibt Features, die Modernizr aus technischen Gründen nicht erkennen kann – die sogenannten Undetectables, die im Modernizr-Wiki in einer Liste gesammelt werden. (Dort findet man auch eine Liste der empfehlenswerten Polyfills.)

Community-Erweiterungen

Es gibt bereits eine Vielzahl von Erweiterungen für Modernizr aus der Community (Stand März 2012: 74). Diese liegen auf GitHub, lassen sich jedoch viel einfacher über den Download-Builder in Modernizr integrieren. Ebenso müssen die API-Methoden zur Nutzung von Prefixed (nicht aber für Media Queries) und zum Schreiben eigener Erweiterungen auf diese Weise ausdrücklich eingebunden werden.