Aide-mémoire Modernizr

[!NOTE] Note web moderne : Modernizr était essentiel lors de la transition vers HTML5 et CSS3. Le développement moderne utilise plutôt @supports en CSS et des tests directs d'API ('fetch' in window) en JavaScript.

Modernizr détecte la disponibilité des fonctionnalités HTML5 et CSS3 dans le navigateur de l'utilisateur, remplaçant l'inspection fragile du user-agent.

Fonctionnement de Modernizr

Une fois chargé, Modernizr exécute les tests et :

1. Ajoute des classes telles que .flexbox ou .no-flexbox à l'élément racine <html>.
2. Expose un objet JavaScript global Modernizr doté de propriétés booléennes.

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

---

Styles conditionnels en CSS

Ciblez directement les navigateurs compatibles ou non dans vos feuilles de style :

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

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

---

Détection de fonctionnalités en JavaScript

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

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

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

---

Fonctionnalités courantes détectables

Fonctionnalités CSS

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

HTML5 et API de stockage

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

---

Références

• Documentation officielle de Modernizr
• MDN : Utiliser la détection de fonctionnalités