Mach3.laBlog

HTML5の新機能が使用可能かどうかを判別するJSコード一覧

この記事は賞味期限切れです。(更新から1年が経過しています)

HTML5で色々と新機能が登場しましたが、ブラウザの対応状況は未だまちまちです。
こちらのサイトでは、ブラウザが対応しているかを判別する為のJSコードを一覧にしてくれています。

Dive Into HTML5

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個も掲載されています。
(数え間違えでなければ)
尚、それぞれの見出しは該当する要素のドキュメントに飛ばしてくれます。

ブラウザの対応が安定した物になるには、まだまだ時間が必要。
しばらく判別式にお世話になると思われますので、
こういったリストの存在は大変ありがたいですね。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*