Modernizr durch eigene Tests erweitern

Modernizr - Auswahl von EigenschaftenModernizr ist das Tool der Wahl, um zu überprüfen, ob ein Browser ein bestimmtes Features versteht oder nicht. Je nach Ergebnis ergänzt Modernizr dann passende Klassen beim HTML-Start-Tag. Darauf basierend lassen sich besondere Formatierungen für beide Fälle definieren: Für den Fall, dass das Feature unterstützt wird, oder eben, wenn es nicht unterstützt wird.
Beispielsweise erhält durch folgende Angabe das Element mit Klasse .eins, sofern box-shadow nicht unterstützt wird, einen Rahmen:

.no-boxshadow .eins {
border: 2px solid blue;
}

Wenn hingegen box-shadow unterstützt wird, wird der Rahmen ausgeblendet und stattdessen ein Schatten angezeigt:

.boxshadow .eins {
border: none;
box-shadow: 0px 0px 5px blue;
}

Auf welche Eigenschaften überprüft werden soll, kann man auf der Download-Seite von Modernizr selbst bestimmen. Falls einmal die gewünschte CSS3-Eigenschaft nicht dabei ist, lässt sich Modernizr einfach durch eigene Tests erweitern.

Ein Fall, wo das sinnvoll sein kann, ist Flexbox. Das neue Layoutmodul bietet eine große Anzahl von Eigenschaften. Bei Modernizr wird als Basis zur Ermittlung, ob das neue Flexbox-Modul unterstützt wird, die Eigenschaft flex-wrap herangezogen. Allerdings implementiert gerade Firefox diese Eigenschaft erst ab Version 28. Damit werden vorherige Firefox-Versionen, obwohl sie die meisten der Flexbox-Eigenschaften unterstützen, als nicht unterstützend gewertet. Abhilfe: Man ergänzt Modernizr um eigene Tests und gibt dabei die CSS-Eigenschaft an, die für das eigene Projekt relevant ist.

Wenn man beispielsweise überprüfen möchte, ob die Eigenschaft flex unterstützt wird, so genügt folgende Ergänzung – die natürlich nach dem Einbinden von Modernizr erfolgen muss (oder am Ende der Modernizr-Datei).

Modernizr.addTest('meinflexbox', function(){
return Modernizr.testAllProps('flex');
});

Durch testAllProps() wird auch getestet, ob ein Browser diese Eigenschaft mit einem Präfix unterstützt. Wird die Eigenschaft unterstützt, ergänzt nun Modernizr die Klasse meinflexbox beim HTML-Start-Element, ansonsten no-meinflexbox. Überprüfte Eigenschaft wie auch der Klassenname lassen sich natürlich beliebig anpassen.

Kommentare sind geschlossen.