Modernizr
Modernizrは、Web開発者がブラウザの機能検出を簡単に行えるJavaScriptライブラリです。HTML5とCSS3の新機能に対するブラウザのサポート状況を検出し、クロスブラウザ対応を容易にします。
インストール方法
編集CDNを利用する方法
編集<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/3.13.1/modernizr.min.js"></script>
npmを使用する方法
編集npm install modernizr
ダウンロードとカスタムビルド
編集- Modernizrの公式サイトで必要な機能を選択
- カスタムビルドをダウンロード
- プロジェクトに組み込む
基本的な使用方法
編集機能検出の基本
編集if (Modernizr.flexbox) { // Flexboxをサポートしている場合の処理 } else { // 代替レイアウト方法を適用 }
HTML要素へのクラス付与
編集Modernizrは自動的に<html>タグにクラスを追加します：
<html class="no-js flexbox canvas"> <!-- ブラウザの機能に応じたクラスが付与される --> </html>
主要な検出機能
編集HTML5の機能
編集Modernizr.canvas: Canvas要素のサポートModernizr.localstorage: LocalStorageのサポートModernizr.geolocation: Geolocation APIのサポート
CSS3の機能
編集Modernizr.flexbox: FlexboxレイアウトのサポートModernizr.cssanimations: CSS アニメーションのサポートModernizr.transforms: CSS変形のサポート
マルチメディア機能
編集Modernizr.video: HTML5ビデオのサポートModernizr.audio: HTML5オーディオのサポートModernizr.webgl: WebGLのサポート
高度な使用方法
編集カスタム検出
編集Modernizr.addTest('customfeature', function() { // カスタムの機能検出ロジック return true; // または false });
ポリフィル統合
編集if (!Modernizr.flexbox) { // Flexboxポリフィルの読み込み document.write('<script src="flexbox-polyfill.js"><\/script>'); }
パフォーマンスと注意点
編集- 必要最小限の機能のみを含めたカスタムビルドを推奨
- 過度な機能検出はページ読み込み時間に影響を与える可能性がある
- モダンブラウザでは多くの機能が標準サポートされているため、使用頻度が低下
発展の歴史
編集- 2009年: Paul Irish and Faruk Ateş によって開発開始
- 2010年: オープンソースプロジェクトとして公開
- 2015年: メジャーバージョン3.0リリース
- 2018年: 開発の低下、代替手段の台頭
代替手段
編集- Feature.js
- Detect.js
- CSS @supports
- ネイティブJavaScriptの機能検出
コード例：実践的な使用 =
編集// レスポンシブデザインの条件分岐 if (Modernizr.mq('only screen and (max-width: 768px)')) { // モバイル向けレイアウト } else { // デスクトップ向けレイアウト } // タッチデバイス向けの処理 if (Modernizr.touch) { // タッチイベントに最適化された処理 element.addEventListener('touchstart', handleTouch); }