Ściągawka z Modernizr

[!NOTE] Współczesna uwaga: Modernizr był kluczowy w okresie przejścia na HTML5 i CSS3. Obecnie stosuje się głównie @supports w CSS oraz bezpośrednie sprawdzanie API ('fetch' in window) w JavaScript.

Modernizr wykrywa dostępność nowoczesnych funkcji HTML5 i CSS3 w przeglądarce użytkownika, zastępując zawodne sprawdzanie nagłówka user-agent.

Jak działa Modernizr

Po załadowaniu Modernizr uruchamia testy funkcji i:

1. Dodaje klasy takie jak .flexbox lub .no-flexbox do elementu głównego <html>.
2. Udostępnia globalny obiekt JavaScript Modernizr z właściwościami logicznymi wyników testów.

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

---

Warunkowe stylowanie w CSS

Kieruj reguły CSS bezpośrednio do przeglądarek wspierających i niewspierających funkcji:

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

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

---

Wykrywanie funkcji w JavaScript

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

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

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

---

Popularne wykrywane funkcje

Funkcje CSS

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

HTML5 i API pamięci

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

---

Źródła

• Oficjalna dokumentacja Modernizr
• MDN: Korzystanie z wykrywania funkcji