Modernizr spiekbriefje

[!NOTE] Opmerking over het moderne web: Modernizr was essentieel tijdens de overgang naar HTML5 en CSS3. Moderne ontwikkeling gebruikt meestal @supports in CSS en directe API-controles ('fetch' in window) in JavaScript.

Modernizr detecteert de beschikbaarheid van HTML5- en CSS3-functies in de browser van de gebruiker als betrouwbaar alternatief voor user-agent sniffing.

Hoe Modernizr werkt

Na het laden voert Modernizr functietests uit en:

1. Voegt klassen zoals .flexbox of .no-flexbox toe aan het hoofdelement <html>.
2. Stelt een globaal JavaScript-object Modernizr beschikbaar met booleaanse testeigenschappen.

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

---

Voorwaardelijke stijlen in CSS

Richt je direct in stylesheets op ondersteunde versus niet-ondersteunde browsers:

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

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

---

Functiedetectie in JavaScript

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

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

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

---

Veelgebruikte detecteerbare functies

CSS-functies

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

HTML5- & Opslag-API's

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

---

Referenties

• Officiële Modernizr-documentatie
• MDN: Functiedetectie gebruiken