Html5-modernizr

HTML5-Modernizr

Modernizrは、次世代のWebテクノロジーのネイティブ実装の可用性を検出する小さな* JavaScriptライブラリ*です。

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

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

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

このユーティリティの最新バージョンは、https://www.modernizr.com/[Modernizr Download]からダウンロードできます。

構文

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

<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で検出できる機能のリストです-

Feature	CSS Property	JavaScript Check
@font-face	.fontface	Modernizr.fontface
Canvas	.canvas	Modernizr.canvas
Canvas Text	.canvastext	Modernizr.canvastext
HTML5 Audio	.audio	Modernizr.audio
HTML5 Audio formats	NA	Modernizr.audio[format]
HTML5 Video	.video	Modernizr.video
HTML5 Video Formats	NA	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 Animations	.cssanimations	Modernizr.cssanimations
CSS Columns	.csscolumns	Modernizr.csscolumns
CSS Gradients	.cssgradients	Modernizr.cssgradients
CSS Reflections	.cssreflections	Modernizr.cssreflections
CSS 2D Transforms	.csstransforms	Modernizr.csstransforms
CSS 3D Transforms	.csstransforms3d	Modernizr.csstransforms3d
CSS Transitions	.csstransitions	Modernizr.csstransitions
Geolocation API	.geolocation	Modernizr.geolocation
Input Types	NA	Modernizr.inputtypes[type]
Input Attributes	NA	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 Clip Paths	.svgclippaths	Modernizr.svgclippaths
SMIL	.smil	Modernizr.smil
Web SQL Database	.websqldatabase	Modernizr.websqldatabase
IndexedDB	.indexeddb	Modernizr.indexeddb
Web Sockets	.websockets	Modernizr.websockets
Hashchange Event	.hashchange	Modernizr.hashchange
History Management	.historymanagement	Modernizr.historymanagement
Drag and Drop	.draganddrop	Modernizr.draganddrop
Cross-window Messaging	.crosswindowmessaging	Modernizr.crosswindowmessaging
addTest() Plugin API	NA	Modernizr.addTest(str,fn)