Hoja de trucos de Modernizr

[!NOTE] Nota de web moderna: Modernizr fue esencial en la transición a HTML5 y CSS3. El desarrollo moderno suele usar @supports en CSS y comprobaciones directas ('fetch' in window) en JavaScript.

Modernizr detecta la disponibilidad de funciones modernas de HTML5 y CSS3 en el navegador del usuario, reemplazando el frágil análisis del user-agent por detección de características.

Cómo funciona Modernizr

Al cargarse, Modernizr ejecuta pruebas de compatibilidad y:

1. Añade clases como .flexbox o .no-flexbox al elemento raíz <html>.
2. Expone un objeto global Modernizr en JavaScript con propiedades booleanas de prueba.

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

---

Estilos condicionales en CSS

Apunta directamente en las hojas de estilos a navegadores compatibles e incompatibles:

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

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

---

Detección de características en JavaScript

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

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

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

---

Características comunes detectables

Características CSS

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

HTML5 y APIs de almacenamiento

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

---

Referencias

• Documentación oficial de Modernizr
• MDN: Uso de detección de características