Modernizr Cheatsheet

[!NOTE] Modern Web Note: Modernizr was essential during the transition to HTML5 and CSS3. Modern development typically relies on @supports in CSS and direct API checking ('fetch' in window) in JavaScript.

Modernizr detects the availability of next-generation HTML5 and CSS3 features in the user's browser, replacing brittle user-agent sniffing with reliable feature detection.

How Modernizr Works

When loaded, Modernizr runs feature tests and:

1. Adds classes like .flexbox or .no-flexbox to the <html> root element.
2. Exposes a global Modernizr JavaScript object with boolean test properties.

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

---

Conditional Styling in CSS

Target supported vs unsupported browsers directly in stylesheets:

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

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

---

JavaScript Feature Detection

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

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

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

---

Common Detectable Features

CSS Features

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

HTML5 & Storage APIs

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

---

References

• Modernizr Official Documentation
• MDN: Using Feature Detection