結構最近IE8の対応をしない事例が増えてきましたが、まだまだ対応するケースはあります。
CSSでアニメーションを実装する機会が増えてきたので、IE8はアニメーションを簡素なものにしたりとバージョンで切り分けする場合が多いかと思います。
整理してみると判定方法はいろいろあるので、思いついた範囲で紹介します。
UAで判定
シンプルにuserAgentとappVersionを見ます。
var isIE8;
if (userAgent.indexOf('msie') != -1 && appVersion.indexOf("msie 8.") != -1) {
isIE8 = true;
}
Opacityで判定
有名ドコロのライブラリはCSSのOpacityプロパティに対応しているかどうかで判定を行う実装が多いです。
該当部分を抜粋して見てみましょう。
Modernizr
tests['opacity'] = function() {
setCssAll('opacity:.55');
return (/^0.55$/).test(mStyle.opacity);
};
jQuery 1.11.2
var div = document.createElement( "div" );
div.innerHTML = " <link/><table></table><a href='/a'>a</a><input type='checkbox'/>";
var a = div.getElementsByTagName( "a" )[ 0 ];
var style = a && a.style;
// Finish early in limited (non-browser) environments
if ( !style ) {
return;
}
style.cssText = "float:left;opacity:.5";
// Support: IE<9
// Make sure that element opacity exists (as opposed to filter)
support.opacity = style.opacity === "0.5";
どちらもstyleプロパティにopacityを指定して存在するかチェックしています。
Object.keysで判定
Objectオブジェクトに特定のプロパティが実装されているかで判定します。
var isIE8;
if (Object.keys != null) {
isIE8 = false;
}
else {
isIE8 = true;
}
番外編
これまでIEの判定で@cc_onを使う場合がありましたが、IE11ではサポートされていないようです。
var isIE = /*@cc_on!@*/false;
バグの原因になりますので、既存のサイトで使っている場合は早急に対応をしておいたほうがいいですね。