Jump to the content

IE8の判定方法いろいろ

JavaScript

    結構最近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;
    

    バグの原因になりますので、既存のサイトで使っている場合は早急に対応をしておいたほうがいいですね。

    @cc_on ステートメント (JavaScript)

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×