IEのサポート終了で使えるCSS

はじめに

遂にこの時がきました。
2022年6月15日に、Internet Explorer 11のサポートが終了しました。
これからはIEを気にすることなく、モダンCSSを使用できます。

そこで今まではIE対応で使用できなかった、CSSのプロパティやHTMLをまとめてみました。

object-fit

コンテンツ領域に合わせたサイズで要素を表示できるプロパティ

img {
  object-fit: cover;
  object-position: right top;
}

var

CSSで使える変数を出力する関数

:root {
  --font-color: black;
}
p {
  color: var(--font-color);
}

aspect-ratio

画像のアスペクト比を維持しながら拡大縮小ができるプロパティ

div {
  width: 100%;
  aspect-ratio: 16 / 9;
}

position: sticky;

ウィンドウを基準に追従するのではなく、ブロックを基準にして追従するプロパティ

.sticky {
  position: sticky;
  top: 10px;
}

以上全てではありませんが、IEのサポート終了に伴い、積極的に取り入れたいCSSのプロパティについてまとめてみました。
これ以外にもまだまだあるので、また別の記事でもまとめたいと思います。