[フロントエンド] IE11の場合に、bodyタグに「ie11」というCSSクラスを付与するJavaScript実装

こんにちは、@yoheiMuneです。
公開サイトなどマークアップをしていると、まだまだ考慮が必要なIE11。それを判別するためのJavaScript実装を、今日はブログに書きたいと思います。

目次

IE11を判定するためのUserAgent

表示しているブラウザを判別するには、UserAgentを利用します。例えばWindows10に搭載されたInternet Explorer11 場合、UserAgentは以下のような値となります。

// window.navigator.userAgent
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko

この文字列を読み取って、IE11判定を行います。

IE11を判定するJavaScript

上記のUserAgentをJavaScriptから読み取り、IE11であるかを判定します。以下のように実装します。

// IE11を判定する.

// UserAgent を取得し、全て小文字にする.
var ua = window.navigator.userAgent.toLowerCase();

// Internet Explorer であるかを判定する.
var isIE = (ua.indexOf('msie') >= 0 || ua.indexOf('trident') >= 0);

// もしIEの場合は、
if (isIE) {
  
  // IEのバージョンを、正規表現で取得する.
  var array = /(msie|rv:?)\s?([\d\.]+)/.exec(ua);
  var version = (array) ? array[2] : '';

  // バージョンを整数の形式にする（11.0 -> 11）
  version = version.split('.')[0];

  // IE11であるかを判定する.
  if (version === '11') {
    // IE11です！
  }
}

正規表現の部分が少し難解ですが、上記の処理で、IE11であるかを判定できます。

IE11の場合に、bodyに「ie11」というCSSクラスを付与する

最後に、bodyタグに「ie11」というCSSクラスを付与したいと思います。以下のように実装します。

// 省略...

  // IE11であるかを判定する.
  if (version === '11') {
    
    // body タグに「ie11」クラスを追加する.
    window.document.body.classList.add('ie11');
  }
}

jQueryを使う場合には、$('body').addClass('ie11')でもOKです。

最後に

特に企業向けサービスでは、IE11はまだまだ無くならないので、引き続き対応が必要ですね〜。

最後になりますが本ブログでは、フロントエンド、インフラ、サーバー、PHP、Swift、Python、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！