IEのサポート終了で、ちょっとCSSが楽に。

まもなくサポートが終了するIE．Web界隈では待ちに待ったときがもうすぐ迎えようとしています。

IEを除外することができれば、いろいろCSSが便利になります。

１．aspect-ratio

画像を表示させるときPadding-bottom(top)でエリアを確保して、absoluteで合わせていましたが、「aspect-ratio」で横縦比を記述してwidth,heigh:100%を設定すればOKと簡単になります。

画像の位置は、「object-position」で設定で完璧です。

２．position: sticky

いままでは、polyfillの読み込みをしていましたが、なしでOK。

ちょっと癖がありますが、なれれば問題なし。

３．gap

Flexを使用時、ネガティブマージンを使っていましたが、gapでOKになります。思考的にもわかりやすく書くことできます。

4.min(), max() and clamp()

うまく活用すれば、メディアクエリ不要になります。

width: min(30%, 200px);　30%か200pxの小さい方

width: max(50%, 600px);　50%か600pxの大きい方

width: clamp(200px, 40%, 600px);　最小が200px、推奨幅が40%、最大が600px

幅だけではなく、padding、fontなどいろいろ使えます。

他にもいろいろありますので、よく使うものを紹介していきたいと思います。