IEには対応していないけれど、ゆくゆくは使っていきたいCSSプロパティ

こんにちは、中村です。
みなさん、IEはまだ標準対応をしているでしょうか。
オプション対応にされているところも増えてきたと思いますが、なかなか切り離せないのが現状です。
使いたいのに、IEのことを考えるとまだ使えない。でも、使いたい！
そんなCSSプロパティをご紹介します。

aspect-ratio

aspect-ratio: 16 / 9;

padding-topで高さをつけて、absoluteで幅・高さをいっぱいに、とかやってますよね。
1行で済むなんて・・これはとても使いたいです。
※表示サイズ関連ではwidthなど値にmax-content、min-content、fit-content()などもあります。

参考: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

対応状況: https://caniuse.com/?search=aspect-ratio

backdrop-filter

backdrop-filter: blur(2px);

backdrop-filterを指定した要素の下の表示を加工するプロパティです。
（filterは指定した要素自体を加工します）
blurとbrightnessあたりをよく使いそうですね。
※Firefoxも対応されていません。残念。
似たようなもので、mix-blend-modeの乗算も使えると便利ですね。

参考: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

対応状況: https://caniuse.com/?search=backdrop-filter

clamp

font-size: clamp(30px,4vw,60px);

clamp(最低値,値,最大値)という書き方になります。

これはプロパティではなくて関数ですが、とても便利だなと思うので載せました。
最低値・値・最大値を一つで書けます。
値をウィンドウ幅に合わせた相対的な数値を指定することで、ある程度はメディアクエリがなくても程よいサイズに調整することが可能になります。

使い方はwidthで紹介されていることが多いですが、width（heightも）はmin-width、max-widthがあるので、どちらかというとpaddigやfont-sizeなどでの活用を期待しています。

参考: https://developer.mozilla.org/ja/docs/Web/CSS/clamp()

対応状況: https://caniuse.com/?search=clamp()

それぞれの表示DEMO

See the Pen by Nakamura (@takayo-nakamura) on CodePen.

本当はIE対応していないけれど、使っているもの

使えないところをなんとかしてくれるpolyfill。本当に、助かります。
ありがとうございます。
※だいぶ前から使われているものなのでDEMOには入れていないです。

position: sticky

 position: sticky;

もう活用している方も多いと思いますが、スクロールに合わせて追従します。
サイドメニューなどでよく使います。
polyfillを入れることでIEでも似たような動作ができるようになります。
（position:absoluteにして位置を調整してくれます。）
※left, right, bottomは対応していないため、topの指定の時しか再現してくれません。