Cheat Sheet per Modernizr

[!NOTE] Nota sul Web moderno: Modernizr è stato essenziale nella transizione a HTML5 e CSS3. Lo sviluppo moderno si affida di norma a @supports in CSS e controlli diretti delle API ('fetch' in window) in JavaScript.

Modernizr rileva la disponibilità delle funzionalità HTML5 e CSS3 nel browser dell'utente, sostituendo l'inaffidabile user-agent sniffing.

Come funziona Modernizr

Una volta caricato, Modernizr esegue i test sulle funzionalità e:

1. Aggiunge classi come .flexbox o .no-flexbox all'elemento radice <html>.
2. Espone un oggetto JavaScript globale Modernizr con proprietà booleane di verifica.

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

---

Stili condizionali in CSS

Indirizza direttamente nei fogli di stile i browser supportati e non supportati:

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

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

---

Rilevamento funzionalità in JavaScript

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

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

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

---

Funzionalità comuni rilevabili

Funzionalità CSS

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

HTML5 e API di archiviazione

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

---

Riferimenti

• Documentazione ufficiale Modernizr
• MDN: Usare il rilevamento delle funzionalità