Шпаргалка по Modernizr

[!NOTE] Примечание о современном вебе: Modernizr был незаменим при переходе на HTML5 и CSS3. Сегодня обычно применяют @supports в CSS и прямую проверку API ('fetch' in window) в JavaScript.

Modernizr определяет поддержку возможностей HTML5 и CSS3 в браузере пользователя, заменяя ненадёжный разбор user-agent проверкой функций.

Как работает Modernizr

После загрузки Modernizr выполняет тесты возможностей и:

1. Добавляет классы вроде .flexbox или .no-flexbox к корневому элементу <html>.
2. Предоставляет глобальный объект JavaScript Modernizr с логическими свойствами для каждой проверки.

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

---

Условная стилизация в CSS

Настраивайте стили отдельно для поддерживающих и неподдерживающих браузеров прямо в CSS:

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

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

---

Определение возможностей в JavaScript

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

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

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

---

Часто проверяемые возможности

Возможности CSS

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

HTML5 и API хранилища

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

---

Ссылки

• Официальная документация Modernizr
• MDN: Использование определения возможностей