2019/03/27更新

[フロントエンド] 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、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。