ユーザーエージェントから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以外のブラウザでは、配列の境界をテストする必要があるだろう、コードを短くするために使用されます。
注:ユーザーエージェントがブラウザを「互換モード」に設定している場合、ユーザーエージェントが偽装されたり省略されたりすることがあります。これは実際には問題のようには思えませんが。
ユーザーエージェントなしで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の各バージョンには、以前のバージョンにはない追加機能のサポートが追加されています。そのため、トップダウン方式で機能をテストできます。三元もののシーケンスは、簡潔にするため、ここで使用されている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 ) );