IE11対応時に必要なポリフィルを毎回忘れるのでまとめてみました！！

HTML

Picturefill

レスポンシブイメージで利用する picture タグですが IE11 では利用できません…

npm

npm install picturefill --save

js

import picturefill from 'picturefill'

CDN

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js"></script>

使い方

picturefill.js を読み込むだけで利用できます。

CSS

CSS Variables Polyfill for IE11

ブレイクポイントによって CSS の値を変える時に便利な CSS変数 ですが IE11 では利用できません…

使い方

以下のスクリプトを読み込ませるだけです。

html

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>

とっても簡単に CSS変数 が利用できるようになりますが、以下の状況では利用できません…
ちょっと微妙です…

!important が設定されている場合
calc内で利用している場合

css

/* CSS変数が利用できない… */
.btn-brand{
  color: var(--key-color) !important;
  width: calc(100% - var(--gutter-width));
}

object-fit-images

CSS の object-fit プロパティですが IE11 では利用できません…

CMSの記事一覧ページのサムネイル画像など、画像の幅と高さが固定できない場合に object-fit: cover; を利用したいですよね。

npm

npm install object-fit-images --save

js

import objectFitImages from 'object-fit-images';

CDN

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>

使い方

HTML

object-fit を適用したい <img> タグにclassを指定する。

html

<img class="objectfit" src="image.jpg">

CSS

object-fit: cover; の記述と同時に 'font-family' に object-fit の記述をクォーテーションで囲んで記述する。

css

.objectfit {
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

object-position も指定する場合は、以下のように記述する。

css

.objectfit {
  object-fit: cover;
  object-position: top left;
  font-family: 'object-fit: cover; object-position: top left;';
}

JavaScript

全ての画像に適用

js

objectFitImages();

特定のclassに適用

ls

objectFitImages('.objectfit');

stickyfilljs

CSSの position: sticky; プロパティですが IE11 では利用できません…

ヘッダーを固定するのに position: fixed; ではなく position: sticky; を利用するとヘッダーの高さ分のスペースを確保しなくて済むので楽です。

npm

npm install stickyfilljs --save

js

import Stickyfill from 'stickyfilljs'

CDN

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.js"></script>

使い方

HTML

html

<div id="js-header" class="l-header">
    ...
</div>

CSS

css

.l-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%; 
}

JavaScript

js

const header = document.getElementById('js-header');
Stickyfill.add(header);

JavaScript

custom-event-polyfill

オリジナルのイベントを定義できて便利な CustomEvent ですが IE11 では利用できません…

npm

npm install custom-event-polyfill --save

js

import customEventPolyfill from 'custom-event-polyfill'

使い方

CustomEvent を利用する JavaScript より先にこのポリフィルを読み込ませるだけです。

IntersectionObserver

スクロールエフェクト時に便利な Intersection Observer API ですが IE11 では利用できません…

npm

npm install intersection-observer --save

js

import intersectionObserver from 'intersection-observer'

使い方

Intersection Observer API を利用する JavaScript より先にこのポリフィルを読み込ませるだけです。