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

早いものでもう師走ですね。
今年のビッグニュースと言えば、個人的にはコレです。

Internet Explorer 11は2022年6月15日にサポート終了

Microsoft Edge が Internet Explorer のほとんどの機能を内包し、更にコレクションやWebキャプチャを始めとする最新の機能を備えていることから、Internet Explorer 11 デスクトップアプリケーションは 2022 年 6 月 15 日をもってサポートを終了いたします。

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

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

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

filterとmix-blend-mode、position: sticky は他記事にまとめているのでそちらも御覧ください。
→ まだあまり使ったことのないプロパティをいじってみる

画像のアスペクト比をそのままに、拡縮させるobject-fit

object-fit: cover; を設定すると画像のアスペクト比をそのままに、拡縮させることができます。

See the Pen
Untitled by un-T Morikawa (@unt-morikawa)
on CodePen.

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

要素にマスクをかけられるclip-path

clip-path を設定すると要素にマスクをかけられます。

See the Pen
Untitled by un-T Morikawa (@unt-morikawa)
on CodePen.

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 を使用することで横幅に応じてカラム数など自動調整するように設定できます。

See the Pen
Untitled by un-T Morikawa (@unt-morikawa)
on CodePen.

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

gapを用いた余白調整

display: flex もIE11ではバグが多くて慎重に実装していましたが、中でも gap は未対応だったため今まで使用は避けていました。

See the Pen
Untitled by un-T Morikawa (@unt-morikawa)
on CodePen.

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

initialによる初期化

たま〜に失念して使用してしまう initial ですが、こちらもIE11では非対応のため注意が必要でした。

See the Pen
Untitled by un-T Morikawa (@unt-morikawa)
on CodePen.

em {
  color: initial;
}

スクロールをスナップさせる

scroll-snap-type を設定することで、スクロール値に応じてブロックをスナップさせることができます。

See the Pen
Untitled by un-T Morikawa (@unt-morikawa)
on CodePen.

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

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

その他のバグについて

画像が原寸サイズで表示される

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

結び

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