ユーザー エージェントから IE のバージョンを取得する
var ie = 0;
try { ie = navigator.userAgent.match( /(MSIE |Trident.*rv[ :])([0-9]+)/ )[ 2 ]; }
catch(e){}
仕組み:すべての IE バージョンのユーザー エージェント文字列には、"MSIE space version " または "Trident other-text rv space-or-colon version " の部分が含まれています。これを知って、String.match()
正規表現からバージョン番号を取得します。コードを短縮するtry-catch
ためにブロックが使用されます。それ以外の場合は、非 IE ブラウザーの配列境界をテストする必要があります。
注:ユーザー エージェントは、ユーザーがブラウザーを「互換モード」に設定している場合、意図せずに偽装または省略される可能性があります。これは実際にはあまり問題にならないように見えますが。
User-Agent なしで IE のバージョンを取得する
var d = document, w = window;
var ie = ( !!w.MSInputMethodContext ? 11 : !d.all ? 99 : w.atob ? 10 :
d.addEventListener ? 9 : d.querySelector ? 8 : w.XMLHttpRequest ? 7 :
d.compatMode ? 6 : w.attachEvent ? 5 : 1 );
仕組み: IE の各バージョンでは、以前のバージョンにはない追加機能のサポートが追加されています。したがって、トップダウン方式で機能をテストできます。ここでは簡潔にするために3 項if-then
シーケンスが使用されていますが、switch
ステートメントも同様に機能します。変数ie
は 5 ~ 11 の整数に設定されます。古い場合は 1、新しい/非 IE の場合は 99 です。IE 1-11 を正確にテストするだけの場合は、0 に設定できます。
注:コードがdocument.addEventListener
. このような状況では、ユーザー エージェントが最適なオプションです。
ブラウザがモダンかどうかを検出する
ブラウザーがほとんどの HTML 5 および CSS 3 標準をサポートしているかどうかのみに関心がある場合は、IE 8 以前が依然として主要な問題のアプリであると想定できます。をテストするwindow.getComputedStyle
と、最新のブラウザー (IE 9、FF 4、Chrome 11、Safari 5、Opera 11.5) もかなりうまくミックスされます。IE 9 では標準のサポートが大幅に改善されていますが、ネイティブ CSS アニメーションには IE 10 が必要です。
var isModernBrowser = ( !document.all || ( document.all && document.addEventListener ) );