Modernizrで検出できる機能一覧｜CSSクラスとJavaScript判定方法まとめ
Modernizrは、ユーザーのブラウザがHTML5やCSS3の各種機能に対応しているかどうかを自動的に検出するための軽量JavaScriptライブラリです。検出結果は、<html>要素に付与されるCSSクラスとして、またはModernizrオブジェクトのプロパティとして利用できます。これにより、ブラウザごとの機能差を意識したフォールバック処理や条件分岐を簡単に実装できます。
Modernizrが検出可能な機能の一覧
以下の表は、Modernizrが検出できる主な機能をまとめたものです。各機能について、対応するCSSクラス名と、JavaScriptで判定する際の記述方法を確認できます。
| 機能 | CSSクラス名 | JavaScriptでの判定 |
|---|---|---|
| @font-face（Webフォント） | .fontface | Modernizr.fontface |
| Canvas | .canvas | Modernizr.canvas |
| Canvasテキスト描画 | .canvastext | Modernizr.canvastext |
| HTML5オーディオ | .audio | Modernizr.audio |
| HTML5オーディオ形式 | なし | Modernizr.audio[format] |
| HTML5ビデオ | .video | Modernizr.video |
| HTML5ビデオ形式 | なし | 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 |
| 複数背景画像 | .multiplebgs | Modernizr.multiplebgs |
| 透明度 | .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 |
| 入力タイプ | なし | Modernizr.inputtypes[type] |
| 入力属性 | なし | 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 |
| 履歴管理 | .historymanagement | Modernizr.historymanagement |
| ドラッグ＆ドロップ | .draganddrop | Modernizr.draganddrop |
| ウィンドウ間メッセージング | .crosswindowmessaging | Modernizr.crosswindowmessaging |
| addTest()プラグインAPI | なし | Modernizr.addTest(str, fn) |
検出結果の活用方法
Modernizrはページ読み込み時に各機能の対応状況をチェックし、結果に応じて<html>要素にクラスを付与します。例えば、Canvasに対応しているブラウザではcanvasクラスが、非対応の場合はno-canvasクラスが付きます。これにより、CSS側では次のようにスタイルを切り替えられます。
.borderradius .box {
border-radius: 10px;
}
.no-borderradius .box {
/* 角丸非対応ブラウザ向けの代替スタイル */
}JavaScript側でも、if (Modernizr.canvas) { ... }のようなシンプルな条件分岐で、機能の有無に応じた処理を実装できます。対応していない機能については、ポリフィルを読み込むか、代替手段を提供することで、あらゆる環境で快適なユーザー体験を実現できます。
-
CSSのbackground-image（背景画像）が表示されないときの対処法4選｜HTML/CSS
CSSで背景画像を扱うのは意外と厄介です。コード上で正しく設定したつもりでも、別の要因によってbackground-imageがページに表示されないことがあるからです。 そこでこの記事では、HTMLとCSSを使って「背景画像が表示されない」問題を解決するための4つの方法を紹介します。 1. CSSファイルがHTMLファイルに正しくリンクされているか確認する CSSのスタイルをWebサイトに読み込ませるには、HTMLファイル内に<link>タグを追加する必要があります。このタグは<head></head>タグの中に配置し、次のような形になります。 <li
-
CSSのoverflow-yプロパティとは？縦方向のはみ出し制御方法をサンプルコード付きで解説
CSSの overflow-y プロパティを使うと、コンテンツが要素の上下（垂直方向）の境界からはみ出した場合に、その内容をどのように表示・処理するかを指定できます。横方向の表示を制御する overflow-x と組み合わせることで、ボックス内のスクロール動作を柔軟にカスタマイズ可能です。 以下は、overflow-y プロパティを実装するシンプルなHTMLとCSSのコード例です。 コード例 <!DOCTYPE html> <html> <head> <style>