HTML5-Modernizr

Modernizrは小さいです JavaScript Library 次世代Webテクノロジーのネイティブ実装の可用性を検出します

HTML5とCSS3を通じて導入されているいくつかの新機能がありますが、同時に多くのブラウザはこれらのニュース機能をサポートしていません。

Modernizrは、対応するアクションを実行できるように、新しい機能を検出する簡単な方法を提供します。たとえば、ブラウザがビデオ機能をサポートしていない場合は、単純なページを表示したいとします。

機能の可用性に基づいてCSSルールを作成できます。これらのルールは、ブラウザーが新しい機能をサポートしていない場合、Webページに自動的に適用されます。

このユーティリティの最新バージョンは、ModernizrDownloadからダウンロードできます。

構文

Modernizrの使用を開始する前に、次のようにそのjavascriptライブラリをHTMLページヘッダーに含める必要があります-

<script src="modernizr.min.js" type="text/javascript"></script>

上記のように、機能の可用性に基づいてCSSルールを作成できます。これらのルールは、ブラウザーが新しい機能をサポートしていない場合、Webページに自動的に適用されます。

以下は、サポートされている機能とサポートされていない機能を処理するための簡単な構文です。

/* In your CSS: */
.no-audio #music {
   display: none; /* Don't show Audio options */
}
.audio #music button {
   /* Style the Play and Pause buttons nicely */
}

<!-- In your HTML: -->
<div id="music">
   
   <audio>
      <source src="audio.ogg" />
      <source src="audio.mp3" />
   </audio>
   
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>

ここで、それらをサポートしていないブラウザで処理するすべての機能/プロパティの前に「no-」を付ける必要があることに注意してください。

以下は、Javascriptを介して特定の機能を検出するための構文です-

if (Modernizr.audio) {
   /* properties for browsers that
   support audio */
}

else{
   /* properties for browsers that
   does not support audio */
}

Modernizrによって検出された機能

以下は、Modernizrで検出できる機能のリストです。

特徴	CSSプロパティ	JavaScriptチェック
@ font-face	.fontface	Modernizr.fontface
キャンバス	。キャンバス	Modernizr.canvas
キャンバステキスト	.canvastext	Modernizr.canvastext
HTML5オーディオ	。オーディオ	Modernizr.audio
HTML5オーディオ形式	NA	Modernizr.audio [フォーマット]
HTML5ビデオ	。ビデオ	Modernizr.video
HTML5ビデオフォーマット	NA	Modernizr.video [フォーマット]
rgba（）	.rgba	Modernizr.rgba
hsla（）	.hsla	Modernizr.hsla
ボーダー画像	.borderimage	Modernizr.borderimage
ボーダー半径	.borderradius	Modernizr.borderradius
ボックスシャドウ	.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
CSS2D変換	.csstransforms	Modernizr.csstransforms
CSS3D変換	.csstransforms3d	Modernizr.csstransforms3d
CSSトランジション	.csstransitions	Modernizr.csstransitions
ジオロケーションAPI	.geolocation	Modernizr.geolocation
入力タイプ	NA	Modernizr.inputtypes [type]
入力属性	NA	Modernizr.input [属性]
ローカルストレージ	。ローカルストレージ	Modernizr.localstorage
sessionStorage	.sessionstorage	Modernizr.sessionstorage
Webワーカー	.webworkers	Modernizr.webworkers
applicationCache	.applicationcache	Modernizr.applicationcache
SVG	.svg	Modernizr.svg
SVGクリップパス	.svgclippaths	Modernizr.svgclippaths
SMIL	.smil	Modernizr.smil
WebSQLデータベース	.websqldatabase	Modernizr.websqldatabase
IndexedDB	.indexeddb	Modernizr.indexeddb
Webソケット	.websockets	Modernizr.websockets
ハッシュチェンジイベント	.hashchange	Modernizr.hashchange
履歴管理	.historymanagement	Modernizr.historymanagement
ドラッグアンドドロップ	。ドラッグアンドドロップ	Modernizr.draganddrop
クロスウィンドウメッセージング	.crosswindowmessaging	Modernizr.crosswindowmessaging
addTest（）プラグインAPI	NA	Modernizr.addTest（str、fn）