IE11対応時によく利用するポリフィル

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

## HTML

### [Picturefill](https://github.com/scottjehl/picturefill)

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

#### [npm](https://www.npmjs.com/package/picturefill)

```
npm install picturefill --save
```

```javascript:js
import picturefill from 'picturefill'
```

#### [CDN](https://cdnjs.com/libraries/picturefill)

```html: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](https://github.com/nuxodin/ie11CustomProperties/)

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

#### 使い方

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

```html: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
/* CSS変数が利用できない… */
.btn-brand{
  color: var(--key-color) !important;
  width: calc(100% - var(--gutter-width));
}
```

### [object-fit-images](https://github.com/fregante/object-fit-images)

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

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

#### [npm](https://www.npmjs.com/package/object-fit-images)

```
npm install object-fit-images --save
```

```javascript:js
import objectFitImages from 'object-fit-images';
```

#### [CDN](https://cdnjs.com/libraries/object-fit-images)

```html: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:html
<img class="objectfit" src="image.jpg">
```

##### CSS 

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

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

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

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

##### JavaScript 

###### 全ての画像に適用

```javascript:js
objectFitImages();
```

###### 特定のclassに適用

```javascript:ls
objectFitImages('.objectfit');
```

### [stickyfilljs](https://github.com/wilddeer/stickyfill)

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

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

#### [npm](https://www.npmjs.com/package/stickyfill)

```
npm install stickyfilljs --save
```

```javascript:js
import Stickyfill from 'stickyfilljs'
```

#### [CDN](https://cdnjs.com/libraries/stickyfill)

```html: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:html
<div id="js-header" class="l-header">
    ...
</div>
```

##### CSS 

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

##### JavaScript 

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

## JavaScript

### [custom-event-polyfill](https://github.com/kumarharsh/custom-event-polyfill#readme)

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

#### [npm](https://www.npmjs.com/package/custom-event-polyfill)

```
npm install custom-event-polyfill --save
```

```javascript:js
import customEventPolyfill from 'custom-event-polyfill'
```

#### 使い方

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

### [IntersectionObserver](https://github.com/w3c/IntersectionObserver/tree/main/polyfill)

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

#### [npm](https://www.npmjs.com/package/intersection-observer)

```
npm install intersection-observer --save
```

```javascript:js
import intersectionObserver from 'intersection-observer'
```

#### 使い方

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