ブログ

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

2022.06.13 : Yamamoto Naoki
Coding

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

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

1.aspect-ratio

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

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

2.position: sticky

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

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

3.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などいろいろ使えます。

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

アーカイブ

資料ダウンロード 制作依頼・ご相談
イメージ:制作依頼・ご相談
イメージ:制作依頼・ご相談