IE11サポート終了に伴い、使用解放が期待されるCSSプロパティをおさらい

早いものでもう師走ですね。
今年のビッグニュースと言えば、個人的にはコレです。
###<a target="_blank" href="https://blogs.windows.com/japan/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/">Internet Explorer 11は2022年6月15日にサポート終了</a>
>Microsoft Edge が Internet Explorer のほとんどの機能を内包し、更にコレクションやWebキャプチャを始めとする最新の機能を備えていることから、Internet Explorer 11 デスクトップ アプリケーションは 2022 年 6 月 15 日をもってサポートを終了いたします。

IE11対応を免罪符に避けられていた仕様などが避けにくくなってしまうなという一抹の不安がありますが、基本的にはやったぜ！という気持ちが大きいです。

実際、IE11のサポート終了に伴って製作工程で何がどう変わるかってところですが、
まずは検証・対応の作業時間がグッと減るのかなと思います。

そして、期待と不安が半々のIE11非対応だったプロパティなどの使用が可能になりますね！
ということで（？）これから気兼ねなく使えるようになるCSSプロパティをまとめたいと思います。

`filter`と`mix-blend-mode`、`position: sticky` は他記事にまとめているのでそちらも御覧ください。
→ <a target="_blank" href="https://qiita.com/un-t-Morris/items/40fcba2589bc3a3a8575">まだあまり使ったことのないプロパティをいじってみる</a>


###画像のアスペクト比をそのままに、拡縮させるobject-fit
`object-fit: cover;` を設定すると画像のアスペクト比をそのままに、拡縮させることができます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyVMgGV" data-user="unt-morikawa" 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/unt-morikawa/pen/dyVMgGV">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```
img {
	display: block;
	width: 100%;
	height: 500px;
	object-fit: cover;
}
```

###要素にマスクをかけられるclip-path
`clip-path` を設定すると要素にマスクをかけられます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LYzNgZj" data-user="unt-morikawa" 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/unt-morikawa/pen/LYzNgZj">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```
img {
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
```

###gridを用いたレイアウト
`grid` を使用することで横幅に応じてカラム数など自動調整するように設定できます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWaNOjV" data-user="unt-morikawa" 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/unt-morikawa/pen/NWaNOjV">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```
.wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
}
```

###gapを用いた余白調整
`display: flex` もIE11ではバグが多くて慎重に実装していましたが、中でも `gap` は未対応だったため今まで使用は避けていました。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ExwKddv" data-user="unt-morikawa" 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/unt-morikawa/pen/ExwKddv">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```
.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
```

###initialによる初期化
たま〜に失念して使用してしまう `initial` ですが、こちらもIE11では非対応のため注意が必要でした。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwLaqvW" data-user="unt-morikawa" 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/unt-morikawa/pen/RwLaqvW">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```
em {
  color: initial;
}
```
###スクロールをスナップさせる
`scroll-snap-type` を設定することで、スクロール値に応じてブロックをスナップさせることができます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abLNPEz" data-user="unt-morikawa" 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/unt-morikawa/pen/abLNPEz">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```
.scroller {
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
}
```

###その他のバグについて
####画像が原寸サイズで表示される
モダンブラウザではSVGファイルも配置するだけで問題なく表示されますが、IE11ではそうはいきませんでした。
`width`と`height` を設定してあげて、ようやくきれいに表示されます。
また、`flexbox` の要素に画像を使用していた場合も原寸サイズで表示されて崩れて見えるなどもありました。
検証時に何度も対応したこのあたりのバグも、今後あまり気にしなくて良いと考えるととても心穏やかになりますね。

##結び
今回はCSSに絞って書きましたが、もちろんJSまわりも影響（恩恵？）があります。
IE11のサポートが外れることを機に、勉強し直して最適なマークアップを行えるようにしたいですね。