どうも、7noteです。IE好きの方はみないでください。

（この記事は、IEの影響で安易に使えないCSS3選の記事です。）

ちょうど本日、
「Microsoft 365サービスが「IE 11」サポートを2021年8月終了--旧「Edge」予定も明らかに」
というニュース記事が上がっており、一瞬

「えっ、ついにIE終了か？！」

と思いましたが違いました、残念。

Microsoft 365サービスにおけるIE11のサポートを終了するだけなので、まだまだIEは続くようですね。

はぁ。。。

IEさえいなければ、こんなに使えるCSSがたくさんあるのに。

filter:～～;（画像の色変えれるのに・・・）

画像にぼかしや色変化などのグラフィック効果が可能になる。

filter:blur(5px);/* ぼかし */filter:contrast(200%);/* コントラストを強く */filter:grayscale(80%);/* グレースケールに変更 */filter:hue-rotate(90deg);/*色相を変更(回転)*/filter:drop-shadow(16px16px20pxred)invert(75%);/*影*/

これがあれば、１種類の画像で複数色に対応できたり、
コントラストを調整させたりが可能になるのに・・・

positon: sticky;（スクロール固定できるのに・・・）

スクロールの途中からついてくる要素を作れる

position:sticky;

引用：https://developer.mozilla.org/ja/docs/Web/CSS/position

あと、stickyはSafariだと、display: inline;かdisplay: inline-block;だと効かないとか。
display: block;かdisplay: flex;を指定している要素にstickyを当てるようにしましょう。

（※PolyfillがあればIEでも可能）

object-fit:～～;（画像のトリミング変えれるのに・・・）

object-fit: cover;を使うと、img要素でもbackground-size: cover;のような自動トリミングを使うことができます。

object-fit:cover;

wordpressとかで呼び出した画像のトリミングなどをcssで一発解決できたら楽ちんなのに。。。

（※PolyfillがあればIEでも可能）

まとめ

まだまだフロントエンジニアによるIEとの戦いは続きますが、めげずに技術や情報を駆使していいサイト作りを続けていきましょう！
他にもIEの影響で使えないCSSなどがあれば共有ください！記事に追加させてもらいます！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）