IE11で使えなかった便利なcss・htmlを振り返る

[Microsoftが正式にサポートを終了発表](https://docs.microsoft.com/ja-jp/lifecycle/faq/internet-explorer-microsoft-edge#:~:text=Internet%20Explorer%20(IE)%2011%20%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97,%E3%82%92%E3%81%8A%E5%8B%A7%E3%82%81%E3%81%97%E3%81%BE%E3%81%99%E3%80%82)

今までご対応お疲れ様でした。
（銀行システムのCOBOLのようにこれからも対応する機会はありそう）
これからはMacOS Safariが入れ替わりのポジションに立ちそうですが、Windowsよりも利用者数は少ないので被害者は増えないでしょう。



動作例ではcodepenを使用しています。
IE11では単体ページを見るには有料ですが、
埋め込んだ場合は普通に見れるみたいなのでIE11で見てみてください。

また、前回適当にまとめたのはこれです↓

https://qiita.com/______________________________ki/items/da418e2d0afc3fba3efe

# CSS編

## object-fit

object-fitは、画像をボックス内にどのように納めるか指定できます。

https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

各プロパティの値を設定した場合のサンプル
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="NWNpeRB" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/NWNpeRB">
  object-fit</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`<img>`だけではなく`<video>`にも使えます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="xxXVjYw" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/xxXVjYw">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

**`contain`**
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。

**`cover`**
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。

**`fill`**
置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。

**`none`**
置換コンテンツは、拡大縮小されません。

**`scale-down`**
コンテンツは none または contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。

### object-position
また、object-fitで指定された画像は**object-position**を使うことで配置を変更することもできます。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="VwMZVqG" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/VwMZVqG">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

値にはtop,left,right,bottomに加え、%やpxで数値を指定できます。

### polyfill
IE11でも使いたい場合は有志がpolyfillを公開しているため、こちらを使用します。

https://github.com/fregante/object-fit-images

### aspect-ratio
また、画像の比率を保つ方法で`aspect-ratio`も存在しています。
因みにこれもIE11では使えません。

https://coliss.com/articles/build-websites/operation/css/how-to-use-aspect-ratio-css-property.html

古来から`padding-top`を使用して比率を保つ方法は伝授されてきましたが、

```
.container {
  width: 100%;
  padding-top: 56.25%;
}
```

`aspect-ratio`を使うことで一目でどの比率に設定されているかがわかります。

```
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}
```

#### polyfill
`aspect-ratio`にもpolyfillはあるので、使いたい場合はこちらを使用とします。
仕組みとしては先ほど紹介した`padding-top`の方法に置き換えるようです。

https://github.com/takamoso/postcss-aspect-ratio-polyfill

## var()
いわゆるCSS変数と呼ばれる物です。
設定した値をcssファイル内で参照することができます。

https://developer.mozilla.org/ja/docs/Web/CSS/var()

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="GRMKPKa" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/GRMKPKa">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

他の要素から参照可能な位置に、ハイフン2つから始まるプロパティ名（--bg-colorなど）を記載し、その中に好きな値を入れます。

あとは参照したい値を**var(--bg-color)**で読み込み、使用します。
また、**var(--bg-color, #fff)**のように--bg-colorが存在しなかった場合のフォールバック値を設定することも可能です。

### polyfill

https://github.com/nuxodin/ie11CustomProperties/

:::note warn
polyfillを使用する際の注意
htmlの描画後にpolyfillが動くので、初期値との切り替わりでちらつきが発生します。
:::

## position: sticky;
`absolute、relative、fixed`などある中の一つで、
親要素のコンテナに合わせて指定した要素が粘着します。
`fixed`に近い動作をしますが、ビューポート基準ではなく親要素を指定して基準にすることができます。
また、配置した高さを保持するので別要素の配置を調整する必要がありません。
よくheaderやsidemenuを固定するのに使われているのを見ます。

https://developer.mozilla.org/ja/docs/Web/CSS/position

■`sticky`の注意点
・親要素に`overflow: hidden;`と`overflow: auto;`を指定すると動かない
・`overflow: scroll;`を使用する場合は高さ指定と、梱包している要素をスクロールできる状態にする必要がある
　・この場合は更に上の要素が`overflow: hidden;`を指定されていても問題ありません（codepen参照）。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNZbxVV" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/WNZbxVV">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### polyfill
IE11でも使いたい場合はこちらを使用します。
仕組みとしては`fixd`で`sticky`を模倣しているようです。

https://github.com/wilddeer/stickyfill

## mask-image
画像に対し、マスクをかけることができます。

https://developer.mozilla.org/ja/docs/Web/CSS/mask-image

1000×500の画像を梨の画像を使ってマスクしています。
透過に使うマスクの画像は`png`のようにアルファチャンネルが必要なので注意を。
マスクをかける方はなんでもいいです。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLObJpv" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/yLObJpv">
  mask-image</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`linear-gradient`もアルファ部分があれば使用することができます。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="eYGZjYE" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/eYGZjYE">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 他の設定

また、`mask-image`に対しては色々な設定をすることができます。

- mask-clip
- mask-composite
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size


■応用例
↓マウスの座標を元にマスクの`mask-position`変化させています。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="NWaNzLW" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/NWaNzLW">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### polyfill
現状有効なものはないようです。
`<svg>`のclip-pathも動かないようなので、代替案も厳しそうです。

#### clip-path
似たようなプロパティで`clip-path`もあります。
こちらはpathを元にマスクをかけます。
変形させたりしたい場合はこっちがよいかも。

https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

## filter
よくPhotoshopなどでできる画像効果をつけられるプロパティです。

https://developer.mozilla.org/ja/docs/Web/CSS/filter

例では1つのみ適用していますが、重ねがけも可能です。

```scss
filter: sepia(1) blur(10px);
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNGxmOM" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/oNGxmOM">
  filter</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`filter: drop-shadow()`は`box-shadow`とは違い、png画像の輪郭に沿って影をつけてくれるので便利です。
`filter: blur()`も簡単にぼかしをつけることができるので、アニメーションの幅が広がったりします。

### polyfill
こちらはIE11でもpolyfillを使えば動かせます。

https://github.com/Schepp/CSS-Filters-Polyfill

## unset / initial / revert
cssのプロパティリセットに使われるものです。
PC/SPの切り替えの際にpositionの値をリセットしたりなど、何かと使いがちです。

https://developer.mozilla.org/ja/docs/Web/CSS/unset
https://developer.mozilla.org/ja/docs/Web/CSS/initial
https://developer.mozilla.org/en-US/docs/Web/CSS/revert

<p class="codepen" data-height="554" data-default-tab="result" data-slug-hash="qBPaEyE" data-user="kiikikikkkiikikkiikikiki" style="height: 554px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/qBPaEyE">
  Reset</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`unset`
継承プロパティは継承値に、それ以外は初期値に設定します。

`initial`
プロパティを初期値に設定します。

`revert`
プロパティをユーザーエージェントのスタイルシート (又はもしあれば、ユーザーのスタイル) で設定された値に初期化します。

### polyfill
存在していないようなので`inherit`を使用して代用するのが良いと思います。
こちらは親から継承するので、親に特に何も設定していなければ初期化されます。

https://developer.mozilla.org/ja/docs/Web/CSS/inherit

## mix-blend-mode
要素を背景と混合することができます。

https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode

混合の対象はテキスト以外にも画像に対しても設定することができます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWabxMg" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/NWabxMg">
  mix-blend-mode</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

効果については種類が多いため、下記参照
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode#effect_of_different_mix-blend-mode_values

### polyfill
探しましたが見つかりませんでした。
もし有効そうなものがあればご共有を。

代替実装を考えましたが、これについては流石に無理でしたので、素直にPhotoshop等で混合した状態で書き出してもらうのがベストだと思います。

## prefers-color-scheme
ダークモード時のスタイルを定義できます。
最近の端末は大体ダークモードの設定が可能で利用者もそれなりにいるので、
切り替え/設定をしっかりしてあげると優しいウェブサイトになるのかと思います。

https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="OJNgoeQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="OJNgoeQ">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/OJNgoeQ">
  OJNgoeQ</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### polyfill
polyfillはこちら。

https://github.com/csstools/css-prefers-color-scheme

## `@supports`
プロパティが対応・未対応の場合に適用するCSS。
そんなプロパティを使うなと言われたらその通りですが、
世の中には予想の斜め上をいく変なブラウザで見ているユーザーもいるので、
念の為の対策は必要です。

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="BaKYQZL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Feature Queries ">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/BaKYQZL">
  Feature Queries </a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### polyfill

https://gist.github.com/codler/03a0995195aa2859465f

## calc()

`calc()`を使うと`100% - 100px`のような計算を加えることができます。

https://developer.mozilla.org/ja/docs/Web/CSS/calc()

IE11では`calc()`は`@keyframes`では使えなく、
また、入れ子にすると動きません。

`calc()`のIE11不具合について調べると`calcにvwは使用できない`とか`vw - %をすると動かない`などの記事が出るんですが、普通に動いてます。謎です。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mdBOPeW" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/mdBOPeW">
  calc in vw</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## その他
気が向いたら詳しく書く

- https://developer.mozilla.org/ja/docs/Web/CSS/fit-content
- https://developer.mozilla.org/ja/docs/Web/CSS/max-content
- https://developer.mozilla.org/ja/docs/Web/CSS/clamp
- https://developer.mozilla.org/ja/docs/Web/CSS/gap
- https://developer.mozilla.org/ja/docs/Web/CSS/:is
- https://developer.mozilla.org/ja/docs/Web/CSS/margin-inline-start

# html編

## `<meter>`

https://developer.mozilla.org/ja/docs/Web/HTML/Element/meter

```html
<meter value="0.5">50%</meter>
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BawpRyW" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/BawpRyW">
  meter</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

似たようなタグで`<progress>`があります。
一応動作的には同じですが、ゲージの色が変えれません。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/progress

### polyfill

https://github.com/azproduction/polyfill

## `<details><summary>`
htmlの折りたたみを実装することができるタグです。
jsを使わずにアコーディオンを実装できます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/details

<details>
<summary>Qiitaでもできるこれです</summary>
    テキストが押されると開閉します。
</details>

```html
<details>
<summary>Qiitaでもできるこれです</summary>
    テキストが押されると開閉します。
</details>

```

### polyfill

https://github.com/rstacruz/details-polyfill

https://github.com/azproduction/polyfill

## `<picture>`
お馴染みの`<picture>`です。
指定したmediaのサイズに応じて読み込む画像を変更できます。
レスポンシブが常識となった今日ではPC/SPの表示切り替えで無駄な画像を読み込ませないために使用は必須と言っても過言ではないです。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture

```html
<picture>
    <source srcset="pc.png" media="(min-width: 768px)">
    <img src="sp.png" alt="画像">
</picture>
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gOGgyGV" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/gOGgyGV">
  picture</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### polyfill

https://github.com/scottjehl/picturefill

## `<main>`
文章中心を表すためのタグです。
IE11だとデフォルトで`display: inline;`になっているので、
そのまま使うと表示崩れを大体起こします。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/main

```html
  <main>
    <p>文章文章文章文章</p>
  </main>
```

### polyfill
他のブラウザのようにデフォルトでblockにしてあげると問題なく使用できます。

```css
main {
  display: block;
}
```

## `<bdi>`
これは書式設定が不明（もしくは右・左書きの違い）の際に使用するタグです。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/bdi

## polyfill

https://github.com/azproduction/polyfill

## `<template>`
記述したhtmlをテンプレートとして使うができます。
js内で無造作にhtmlを入れてDOMを挿入する必要がなくなると言った感じですね。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWadmyN" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/NWadmyN">
  template</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### polyfill

https://github.com/webcomponents/polyfills

## `<input type="color">`
`<input>`の`type`に`color`を指定することでカラーピッカーを使用することができます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color

```html
<input type="color" value="#000">
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="gOGgWRm" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/gOGgWRm">
  color</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### polyfill
polyfillもありますが、見た目を統一する場合はカラーピッカーのライブラリを入れた方が良さそうです。

https://github.com/jonstipe/color-polyfill

## `<output>`
計算結果を出力するためのタグです。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/output

```html
<output name="result" for="a b">20</output>
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKXaYXN" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/KKXaYXN">
  output</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 参考

https://coliss.com/articles/build-websites/operation/work/10-useful-html5-features.html