HTML5の新機能が使用可能かどうかを判別するJSコード一覧
この記事は賞味期限切れです。(更新から1年が経過しています)
HTML5で色々と新機能が登場しましたが、ブラウザの対応状況は未だまちまちです。
こちらのサイトでは、ブラウザが対応しているかを判別する為のJSコードを一覧にしてくれています。
The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything – Dive Into HTML5
軽く抜粋してみます。
audio
return !!document.createElement('audio').canPlayType;
video
return !!document.createElement('video').canPlayType;
canvas
return !!document.createElement('canvas').getContext;
SVG
return !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect);
contentEditable
return 'isContentEditable' in document.createElement('span');
Drag-anddrop
return 'draggable' in document.createElement('span');
localStorage
return ('localStorage' in window) && window['localStorage'] !== null;
Web SQL Database
return !!window.openDatabase;
こんな感じのシンプルな判別式が57個も掲載されています。
(数え間違えでなければ)
尚、それぞれの見出しは該当する要素のドキュメントに飛ばしてくれます。
ブラウザの対応が安定した物になるには、まだまだ時間が必要。
しばらく判別式にお世話になると思われますので、
こういったリストの存在は大変ありがたいですね。
コメント