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);
}

参考リソース