Modernizr チートシート

[!NOTE] モダン Web 開発の補足：Modernizr は HTML5/CSS3 への移行期に重要な役割を果たしました。現在では CSS の @supports や JavaScript での直接判定（'fetch' in window など）を用いるのが一般的です。

Modernizr は、ユーザーのブラウザにおける HTML5 や CSS3 の各種機能の対応状況を判定し、不安定な User-Agent 判別を信頼性の高い機能検出（Feature Detection）に置き換えます。

Modernizr の仕組み

読み込まれると機能テストを実行し、次の処理を行います：

1. <html> ルート要素に .flexbox や .no-flexbox のようなクラスを付与します。
2. 各テスト結果を真偽値プロパティとして持つグローバル Modernizr JavaScript オブジェクトを公開します。

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

---

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: 機能検出の使い方