Modernizr fusklapp

[!NOTE] Notering om modern webb: Modernizr var avgörande under övergången till HTML5 och CSS3. Modern utveckling använder oftast @supports i CSS och direkt API-kontroll ('fetch' in window) i JavaScript.

Modernizr känner av stödet för moderna HTML5- och CSS3-funktioner i webbläsaren och ersätter bräcklig user-agent-kontroll med tillförlitlig funktionsdetektering.

Hur Modernizr fungerar

När biblioteket laddas kör Modernizr funktionstester och:

1. Lägger till klasser som .flexbox eller .no-flexbox på rotelementet <html>.
2. Exponerar ett globalt JavaScript-objekt Modernizr med booleska testegenskaper.

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

---

Villkorlig styling i CSS

Rikta regler direkt i stilmallar mot webbläsare med eller utan stöd:

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

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

---

Funktionsdetektering i JavaScript

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

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

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

---

Vanliga detekterbara funktioner

CSS-funktioner

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

HTML5- & Lagrings-API:er

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

---

Referenser

• Officiell Modernizr-dokumentation
• MDN: Använda funktionsdetektering