ブラウザ
IEサポート終了での影響やメリットについて解説
2022年06月15日 8:00 2022年06月28日
おはようございます！社員Aです👩
今回は、2022年の6月16日をもってサポート終了した「IE」についてWEB制作にもたらす影響について、書いてみたいと思います。
もくじ
ついにやってきた「Internet Explorerサポート終了」
マイクロソフトでは、昨年から Internet Explorer のサポートを徐々に縮小し、Microsoft 365 オンライン サービスでの IE サポート終了などを発表してきました。
そしてついに2022年の6月16日をもってサポート終了。
WEB制作に携わる人なら誰もが一度は経験した「IEでのバグ」から開放されることになりますね。
サポート終了後にIEを開くと、自動的に「Microsoft Edge」が開くようになりました。
「Microsoft Edge」についてはこちらでも解説していますので、ご覧ください。
IEサポート終了に伴い、WEB制作への影響
IEがサポート終了することにより、今まで使用が懸念されていた「CSS」が実装できるようになりました。
今回はその一例をピックアップしてみたいと思います。
position: sticky;
「position」要素と言えば、よく使うのは「relative」や「absolute」ですが、「sticky」もあります。
今まではIEを考慮してなかなか使う機会がなかったのですが、スクロールに応じて要素を固定表示にすることができます。
ヘッダーやグローバルナビでの表示に活躍してくれます。
filter
色味を変えたりぼかしたりするときはPhotoshopで事前に画像を加工されている場合がほとんどですが、CSSのfilterを使用すればWEB上でも効果をつける事が可能です。
ガラスのようなぼかしをつけられる「blur()」や線形乗数を適用して明るさを調整できる「brightness()」などがあります。
filterの使い方については下記記事で詳しく解説・実装しているのでご覧ください。
画像効果を付けることができるCSSプロパティ「filter」
object-fit/object-position
object-fit: cover; や、object-fit: contain;など、比率を維持したまま画像をトリミングしてくれる便利なプロパティー。
投稿などの動的な画像や膨大な数の画像を決まったサイズで切り抜くのにとても重宝します。
今まではIEへの個別の対応が必要でしたが、こちらもスムーズに実装できるようになりました。
object-fitの使い方については下記記事で詳しく解説しているのでご覧ください。
どうしてもobject-fitが使いたい！簡単にIE・Edge対応する方法
gap
「gap」プロパティを使うと、行や列の間のスペース（余白）を調整することができます。
比較的新しいプロパティで、「Flexbox」や「CSS Grid」で使用します。
marginの代替と言ったイメージです。
こちらについてはまた機会があれば記事にしたいと思っています！
ユニバースでは、よりクリエイティブなポスターやチラシ、WEBサイトの制作のご依頼も承っています。
ぜひ、お気軽にお問い合わせください。
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
