ModernizrでHTML5・CSS3の機能対応を検出する方法
Modernizrとは
Modernizrは、次世代のWeb技術がブラウザにネイティブ実装されているかどうかを検出するための軽量JavaScriptライブラリです。HTML5やCSS3の新しい機能を使う際に「このブラウザは対応しているのか？」を自動的に判別できるため、未対応ブラウザ向けのフォールバック処理やプログレッシブエンハンスメントの実装に広く活用されています。
Modernizrを読み込むと、検出結果に応じて<html>要素へ自動的にクラス名（例：.canvas、.no-canvas）が付与されるとともに、JavaScriptからはModernizrオブジェクトの各プロパティ（true/false）を参照して判定できます。
Modernizrで検出できる機能一覧
下記の表は、Modernizrで検出可能な機能と、それに対応するCSSクラス名、JavaScriptでの確認方法をまとめたものです。
| 機能 | CSSプロパティ（クラス名） | JavaScript判定 |
|---|---|---|
| @font-face | .fontface | Modernizr.fontface |
| Canvas | .canvas | Modernizr.canvas |
| Canvasテキスト | .canvastext | Modernizr.canvastext |
| HTML5 Audio | .audio | Modernizr.audio |
| HTML5 Audioフォーマット | なし | Modernizr.audio[format] |
| HTML5 Video | .video | Modernizr.video |
| HTML5 Videoフォーマット | なし | Modernizr.video[format] |
| rgba() | .rgba | Modernizr.rgba |
| hsla() | .hsla | Modernizr.hsla |
| border-image | .borderimage | Modernizr.borderimage |
| border-radius | .borderradius | Modernizr.borderradius |
| box-shadow | .boxshadow | Modernizr.boxshadow |
| 複数背景（Multiple backgrounds） | .multiplebgs | Modernizr.multiplebgs |
| Opacity（透明度） | .opacity | Modernizr.opacity |
| CSSアニメーション | .cssanimations | Modernizr.cssanimations |
| CSSカラムレイアウト | .csscolumns | Modernizr.csscolumns |
| CSSグラデーション | .cssgradients | Modernizr.cssgradients |
| CSS反射効果 | .cssreflections | Modernizr.cssreflections |
| CSS 2Dトランスフォーム | .csstransforms | Modernizr.csstransforms |
| CSS 3Dトランスフォーム | .csstransforms3d | Modernizr.csstransforms3d |
| CSSトランジション | .csstransitions | Modernizr.csstransitions |
| Geolocation API | .geolocation | Modernizr.geolocation |
| 入力タイプ（Input Types） | なし | Modernizr.inputtypes[type] |
| 入力属性（Input Attributes） | なし | Modernizr.input[attribute] |
| localStorage | .localstorage | Modernizr.localstorage |
| sessionStorage | .sessionstorage | Modernizr.sessionstorage |
| Web Workers | .webworkers | Modernizr.webworkers |
| applicationCache | .applicationcache | Modernizr.applicationcache |
| SVG | .svg | Modernizr.svg |
| SVGクリップパス | .svgclippaths | Modernizr.svgclippaths |
| SMIL | .smil | Modernizr.smil |
| Web SQL Database | .websqldatabase | Modernizr.websqldatabase |
| IndexedDB | .indexeddb | Modernizr.indexeddb |
| WebSocket | .websockets | Modernizr.websockets |
| hashchangeイベント | .hashchange | Modernizr.hashchange |
| History管理 | .historymanagement | Modernizr.historymanagement |
| ドラッグ＆ドロップ | .draganddrop | Modernizr.draganddrop |
| クロスウィンドウメッセージング | .crosswindowmessaging | Modernizr.crosswindowmessaging |
| addTest()プラグインAPI | なし | Modernizr.addTest(str, fn) |
JavaScriptでの基本的な判定例
例として、Canvasへの対応状況を判定するコードは次のようになります。
if (Modernizr.canvas) {
// Canvasが使用可能な場合の処理
} else {
// 未対応ブラウザ向けのフォールバック処理
}また、CSS側では自動付与されたクラスを利用してスタイルを切り替えられます。
.no-boxshadow .box {
/* box-shadow非対応時の代替スタイル */
}まとめ
Modernizrを活用すれば、ブラウザごとのHTML5・CSS3対応状況を手動で調べることなく、最新のWeb技術を安全に取り入れることができます。機能検出による条件分岐を適切に行い、すべてのユーザーにとって快適なWeb体験を提供しましょう。
-
RGBAを使ったCSSの透明度設定方法をわかりやすく解説
CSSで要素の透明度を表現する場合、rgba() 関数を使うのが一般的です。RGBにアルファチャンネル（alpha）を加えたこのカラーモデルでは、第4パラメータで色の不透明度（opacity）を細かく指定できます。 RGBAカラーの基本 rgba() は次の4つの値で構成されます。 R（赤）・G（緑）・B（青）：それぞれ0〜255、または0〜100%の数値で指定します。 A（アルファ／透明度）：0.0（完全な透明）〜1.0（完全な不透明）までの小数で指定します。例えば「0.5」なら半透明になります。 通常の rgb() では透明度を扱えませんが、rgba() を使えば背景色だけを半透明にで
-
CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説
HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ