Folha de dicas do Modernizr

[!NOTE] Nota da Web moderna: O Modernizr foi essencial na transição para HTML5 e CSS3. Hoje o desenvolvimento costuma usar @supports no CSS e verificações diretas ('fetch' in window) em JavaScript.

Modernizr detecta a disponibilidade de recursos HTML5 e CSS3 no navegador do usuário, substituindo o frágil user-agent sniffing pela detecção de recursos.

Como o Modernizr funciona

Ao ser carregado, o Modernizr executa testes de recursos e:

1. Adiciona classes como .flexbox ou .no-flexbox ao elemento raiz <html>.
2. Expõe um objeto JavaScript global Modernizr com propriedades booleanas de teste.

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

---

Estilização condicional em CSS

Direcione navegadores com ou sem suporte diretamente nas folhas de estilo:

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

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

---

Detecção de recursos em JavaScript

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

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

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

---

Recursos comuns detectáveis

Recursos CSS

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

APIs HTML5 e armazenamento

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

---

Referências

• Documentação oficial do Modernizr
• MDN: Usando detecção de recursos