IE11対応時に必要なポリフィルを毎回忘れるのでまとめてみました！！
HTML
Picturefill
レスポンシブイメージで利用する picture タグですが IE11 では利用できません…
npm
npm install picturefill --save
import picturefill from 'picturefill'
CDN
<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 では利用できません…
使い方
以下のスクリプトを読み込ませるだけです。
<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変数が利用できない… */
.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
import objectFitImages from 'object-fit-images';
CDN
<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を指定する。
<img class="objectfit" src="image.jpg">
CSS
object-fit: cover; の記述と同時に 'font-family' に object-fit の記述をクォーテーションで囲んで記述する。
.objectfit {
object-fit: cover;
font-family: 'object-fit: cover;';
}
object-position も指定する場合は、以下のように記述する。
.objectfit {
object-fit: cover;
object-position: top left;
font-family: 'object-fit: cover; object-position: top left;';
}
JavaScript
全ての画像に適用
objectFitImages();
特定のclassに適用
objectFitImages('.objectfit');
stickyfilljs
CSSの position: sticky; プロパティですが IE11 では利用できません…
ヘッダーを固定するのに position: fixed; ではなく position: sticky; を利用するとヘッダーの高さ分のスペースを確保しなくて済むので楽です。
npm
npm install stickyfilljs --save
import Stickyfill from 'stickyfilljs'
CDN
<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
<div id="js-header" class="l-header">
...
</div>
CSS
.l-header {
position: sticky;
top: 0;
left: 0;
width: 100%;
}
JavaScript
const header = document.getElementById('js-header');
Stickyfill.add(header);
JavaScript
custom-event-polyfill
オリジナルのイベントを定義できて便利な CustomEvent ですが IE11 では利用できません…
npm
npm install custom-event-polyfill --save
import customEventPolyfill from 'custom-event-polyfill'
使い方
CustomEvent を利用する JavaScript より先にこのポリフィルを読み込ませるだけです。
IntersectionObserver
スクロールエフェクト時に便利な Intersection Observer API ですが IE11 では利用できません…
npm
npm install intersection-observer --save
import intersectionObserver from 'intersection-observer'
使い方
Intersection Observer API を利用する JavaScript より先にこのポリフィルを読み込ませるだけです。