Florence Maurice

Webthemen

Modernizr einsetzen - so gehts mit der Version 3

Geschrieben am:

Modernizr-Logo

Modernizr ist unschlagbar, wenn du alternative Formatierungen für Browser durchführen möchtest, die ein bestimmtes neues HTML5/CSS3-Feature nicht verstehen. Die neue Version von Modernizr sieht auf den ersten Blick ganz anders aus als die gewohnte. Die Benutzung ist aber auch nicht komplizierter.

HINWEIS vom März 2022: Der Artikel stammt aus dem Jahr 2015. Heute kann man in vielen Fällen statt Modernizr direkt über `@supports` im CSS-Code direkt überprüfen, ob ein bestimmte CSS-Eigenschaft unterstützt wird oder nicht.

Wann braucht man aber überhaupt Modernizr? Wenn ein Browser ein CSS3-Feature nicht versteht, ignoriert er es einfach. In vielen Fällen ist das in Ordnung und du musst nicht mehr unternehmen. Wenn text-shadow nicht unterstützt wird, ist der Text halt ohne Schatten. Wenn jedoch der Textschatten entscheidend ist für die Lesbarkeit, muss man dafür sorgen, dass der Text auch noch lesbar ist, wenn ein Browser text-shadow nicht implementiert hat. Ein - extremes - Beispiel wäre, dass man einen weißen Text auf weißem Hintergrund deklariert, bei dem die Umrisse durch text-shadow gebildet werden.

Schrift ist nur dank text-shadow lesbar

In diesem Fall kannst du Modernizr für die alternative Formatierung einsetzen - und beispielsweise dann eine vernünftige Textfarbe für den Fall vorgeben, dass text-shadow nicht unterstützt wird.

Sehen wir uns an, wie das genau geht.

Feature auswählen

Auf der Seite von Modernizr (https://modernizr.com/) wählst du den Button "Add your detects".

Modernizr: Add your detects

Jetzt erscheint eine lange Liste, wo du das Feature aussuchen kann, um das es dir geht. Scrollen ist mühsam, einfacher ist es, das gewünschte direkt in das Suchfeld bei "Type a browser feature" einzugeben.

Modernizr: Feature suchen

Das gewünschte Feature wählst du dann durch Klick auf den Kreis dahinter aus.

Modernizr: Feature auswählen

Bei Bedarf kannst du ein weiteres Feature ins Suchfeld eingeben.

Download-Datei erstellen

Wenn kein Feature mehr benötigt wird, klickst du auf den Button "Build".

Modernizr: Datei erstellen

Jetzt stehen mehrere Optionen zur Verfügung: Hinter Build kannst du mit "Copy to Clipboard" die Datei in die Zwischenablage kopieren oder über "Download" direkt herunterladen.

Modernizr: Download-Optionen

Die heruntergeladene Datei, die die Endung .js haben muss, kopierst du in dein Webverzeichnis.

Modernizr einbinden

In einem HTML-Dokument fügst du den Verweis auf die Datei im head-Bereich ein. Wenn sich die JavaScript-Datei im selben Verzeichnis wie das HTML-Dokument befindet, sieht es etwa so aus:

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<script src="modernizr-custom.js"></script>
<title></title>
</head>
<body>
</body>
</html>

Der richtige Zeitpunkt für eine Überprüfung, ob es geklappt hat. Dafür rufst du das Dokument im Browser auf und öffnest die Entwicklertools (Rechtsklick in das Dokument und "Element untersuchen"). Jetzt sollte das html-Start-Tag mit einer Klasse versehen soll. In den Entwicklertools von Firefox ist beim html-Start-Tag die Klasse textshadow ergänzt.

Modernizr: Klasse ist ergänzt

Im Internet-Explorer 9 würde ich hingegen die Klasse .no-textshadow sehen.

Angepasste Formatierungen definieren

Dann kann man unterschiedliche Formatierungen angeben, je nachdem, ob die Eigenschaft text-shadow unterstützt wird. Nehmen wir an, wir wollen eine Überschrift formatieren. Dann definiere ich eine normal sichtbare Schriftfarbe:

h1 { color: #979797; }

Über den Selektor .textshadow h1 wähle ich hingegen die Überschrift aus, wenn text-shadow unterstützt wird und in diesem Fall kann ich meinen weiße Textfarbe mit dem Textschatten definieren.

.textshadow h1 { color: #fff; text-shadow: 1px 1px 2px black; }

Beispiel austesten: http://www.maurice-web.de/blogbeispiele/modernizr/modernizr.html