はじめに
遂にこの時がきました。
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のプロパティについてまとめてみました。
これ以外にもまだまだあるので、また別の記事でもまとめたいと思います。