IE11で未対応CSS、未対応JSに対応させる方法

Web制作でいつも頭を悩ませてくれるのがIE11対応です。
「IE11にこれは対応しているの？」「IE11でバグがありました」よく耳にする言葉ですね。

今回はIE11で起こるバグと対応方法をまとめていきたいと思います。

IE11のサポート期間

IE10までのサポートはすでに終了しています。そのため、Web制作の際は、IE10までは対応せずに、IE11は対応という形が多いのではないでしょうか。

IE11のサポートは2025年まで続きます。

IE11 end of support countdown

IE11のサポートを終了しているサービスも出てきていますが、Web制作の際はまだまだ「IE11も対応してください。」ということが多いですので、IE11特有のバグと対処法を事前に知っておくと作業もスムーズです。

IE11のみにCSSを適用させる方法

IE11にのみCSSを適用させるCSSハックの方法です。
CSS3等、IE11では対応していない場合にIE11のみに効かせるCSSを記述します。

css hacks for IE11 [ & Edge ( EdgeHTML ) ]

_:-ms-lang(x)::-ms-backdrop, .selector {
      /* ここにIE11のみ適用させるCSSを書く */
}

IE11のバグを対応する

※随時更新予定。

IE11に未対応のCSS3を対応させる

object-fit

imgタグを使用しながらbackgroundのようにcontainやcaoverを指定できるobject-fitプロパティ。IE11では未対応です。

object-fit – CSS | MDN

object-fitをIE11に適応させるにはpolyfillを使用します。

GitHub – fregante/object-fit-images

object-fit用のpolyfill「object-fit-images」はMITライセンスです。
ファイルがダウンロードできたら、以下を読み込ませます。

<script src="dist/ofi.min.js"></script>

object-fit-imagesの使用方法

適用するimgファイル(HTML)

<img class='object-fit-img' src='img.jpg'>

CSSの指定

font-family: ‘object-fit: contain;’;を追加します。

.object-fit-img {
	object-fit: contain;
	font-family: 'object-fit: contain;';
}

object-positionがある場合は以下のように記述します。

.object-fit-img {
	object-fit: cover;
	object-position: bottom;
	font-family: 'object-fit: cover; object-position: bottom;';
}

JSの指定

最後にJSに以下を記述します。

<script>
    objectFitImages();
</script>

任意のクラスにのみobjectFitImagesを適用する場合は、以下のように記述します。

<script>
    objectFitImages('img.object-fit-img');
</script>

以上でIE11でもobject-fitプロパティに対応させることができます。

position: sticky

IE11に対応させるにはpolyfillが必要です。
position: sticky用のpolyfill、「stickyfill」を利用します。

GitHub – wilddeer/stickyfill: Polyfill for CSS `position: sticky`

「stickyfill」はMITライセンスです。

stickyfillの使用方法

stickyfillファイルをHTMLに読み込ませます。

<script src="dist/stickyfill.min.js"></script>

HTMLでstickyプロパティを指定する要素にclass=”sticky”をつけます。(class名は何でもOK)

<div class="sticky">
    ...
</div>

class=”sticky”にstickyプロパティをCSSで記述します。

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

最後にJSでclass=”sticky”要素を指定します。(クラス名を変える場合はquerySelectorAllより後ろの箇所を修正します。)

<script>
    Stickyfill.add(document.querySelectorAll('.sticky'));
</script>

以上でIE11でもstickyプロパティに対応させることができます。

IE11に未対応のJavascriptを対応させる

polyfillを使用して対応する

Javascriptの新しい機能を使用する場合、IE11で対応していなくてエラーになることが多々あります。その場合、対応できるpolyfillがある場合は、polyfillを使用するとIE11でも実行できるように変換してくれます。

polyfillについては以下の記事をご参考ください。

【Polyfill.io】を使用してJavascriptのブラウザ互換を解決する

Babelを使用してJavascriptを新バージョン→ES5に変換して対応する

Babelを使用することで、Javascriptの新しいバージョン(ES6等)で書いたコードを、旧ブラウザ(IE11等)でも実行できる旧バージョンのJavascriptに変換することができます。

特にアロー関数のような新しいバージョンの記法は、polyfillでも対応できないのでBabelで変換(トランスパイル)することをおすすめします。

Babelについては以下の記事をご参考ください。

【Babel】を使ってES6をIE11に対応させる方法

最後に

IE11とはまだまだ長い付き合いになりそうです。もちろん、今後サポート外になるサービスもどんどん増えて来ると思いますが、、

IE11に対応する場合は、事前にバグを把握しておいて、スムーズに対応できるといいですね。