最終更新日：2021.11.18

CSSでIE11を判定する方法と、JavaScriptでIE11だけpolyfillを読み込む書き方

今回はCSSでIE11を判定して表示を切り替える方法と、JavaScriptでIE11だけpolyfillを読み込む書き方について紹介します。

前提条件は以下

JavaScriptは事前にトランスパイル済み
polyfillはPolyfill.ioというサイトから読み込む

説明する環境は以下

macOS Catalina v10.15.5
Visual Studio Code v1.54.3

この記事の目次

CSSでIE11を判定する方法

まずはCSS側でIE11を判定して表示を切り替える方法を紹介します。

/*--通常のブラウザ用--*/
.p-block{
   font-size: 20px;
}

/*--IE11用--*/
_:-ms-lang(x)::-ms-backdrop,
.p-block {
  font-size: 10px;
}

IE11のときだけ表示を切り替えたい要素に、_:-ms-lang(x)::-ms-backdrop,を追加します。

詳しい内容は以下の記事が参考になります。

参考

css hacks for IE11

Qiita

ちなみに以下のような書き方もありますが、IE11でハイコントラストモードがオンになっていると効かないのでオススメしません。

/*--通常のブラウザ用--*/
.p-block{
   font-size: 20px;
}

/*--IE11用--*/
@media all and (-ms-high-contrast:none){
  .p-block {
    font-size: 10px;
  }
}

JavaScriptでIE11だけpolyfillを読み込む書き方

IE11ではJavaScriptのモダンな機能の多くが使えません。基本となる書き方はBabelなどでトランスパイルすれば対応できますが、それでも使えないメソッドはpolyfillを読み込ませて対応させます。

IE11で使えないメソッドはPolyfill.ioというサイトから必要なものだけ選択して読み込みます。

参考

Polyfill.io

Polyfill.io公式

以下はPolyfill.ioでIntersection Observerを選択したときの例です。

URLをコピーできたら、headの中に貼り付けます。IE11でもIntersection Observerが使えるようになります。

<head>
  <script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
</head>

Polyfill.ioではユーザーエージェントによって、表示されたブラウザに足りないメソッドだけを読み込みます。つまりIE11だけ条件分岐してpolyfillを読み込む必要はなく、そのままコピーしたURLをheadに貼り付ければ良いということ。（モダンなブラウザで重複して読まれることがない）

以下はソースです。

念のためIE11だけに独自に条件分岐して、polyfillを読み込ませたい場合は以下のようにheadに書けば良いでしょう。

<!-- IE対策 -->
<script type="text/javascript">
	function addScript(path) {var script = document.createElement("script");script.type = "text/javascript";script.src = path;document.getElementsByTagName("head")[0].appendChild(script);}
	 if (document.documentMode && window.MSInputMethodContext) {
		 addScript("https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver");
	 }
</script>
<!-- END IE対策 -->