Modernizr Spickzettel

[!NOTE] Hinweis zum modernen Web: Modernizr war beim Übergang zu HTML5 und CSS3 essenziell. Moderne Entwicklung nutzt meist @supports in CSS und direkte API-Prüfungen ('fetch' in window) in JavaScript.

Modernizr erkennt die Verfügbarkeit moderner HTML5- und CSS3-Funktionen im Browser und ersetzt fehleranfälliges User-Agent-Sniffing durch zuverlässige Feature-Erkennung.

Funktionsweise von Modernizr

Nach dem Laden führt Modernizr Feature-Tests aus und:

1. Fügt Klassen wie .flexbox oder .no-flexbox dem Wurzelelement <html> hinzu.
2. Stellt ein globales Modernizr-JavaScript-Objekt mit booleschen Testergebnissen bereit.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

---

Bedingtes Styling in CSS

Unterstützte und nicht unterstützte Browser direkt im Stylesheet ansprechen:

/* Fallback layout for older browsers */
.no-flexbox .container {
  display: block;
  float: left;
}

/* Modern flexbox layout */
.flexbox .container {
  display: flex;
  justify-content: space-between;
}

---

Feature-Erkennung in JavaScript

if (Modernizr.geolocation) {
  navigator.geolocation.getCurrentPosition(showMap);
} else {
  showAddressInputFallback();
}

if (Modernizr.localstorage) {
  localStorage.setItem('theme', 'dark');
}

if (Modernizr.webgl) {
  initialize3DCanvas();
}

---

Häufig erkannte Funktionen

CSS-Funktionen

• flexbox, cssgrid
• opacity, rgba, hsla
• boxshadow, textshadow, borderradius
• cssanimations, csstransforms, csstransforms3d, csstransitions
• backgroundsize, borderimage, fontface

HTML5- & Speicher-APIs

• canvas, canvastext, webgl
• localstorage, sessionstorage, indexeddb
• geolocation, history, websockets, webworkers
• video, audio, svg, inlinesvg

---

Referenzen

• Offizielle Modernizr-Dokumentation
• MDN: Feature-Erkennung verwenden