🔖

今後一切訪れないでほしいIE11対応のポイント

2022/05/17に公開

tech

先日サイトリリース後にIE対応を行うという要件が出てきて、IE対応の調査を行いました。
6月にはサポートが切れるので流石に対応することは無いと思いますが、念の為の備忘録です。

細かい実装方法はGoogle先生に任せ、今回の記事ではIE対応するために気をつけるポイントをまとめます。

ライブラリ

一番重かったのがライブラリの対応ですね。IE対応しているか確認が必須です。
特に海外の方のライブラリだと基本的に対応していません。対応しているバージョンまで下げて使う、他のライブラリを使うなどの対応をしましょう。

僕はスライドのライブラリとしてSwiperを使っていましたが、IE非対応でした。
JavaScriptはWebpackでバンドルして出力していたのですが、Swiperがあるせいで全てのJavaScriptが動かないという悲惨な状況になっていました。

IE対応が事前にわかっていたらライブラリの対応状況は要確認です。

gridレイアウト

IEでグリッドを使うためには少し癖があります。
まずAutoprefixerの導入は必須となります。
https://github.com/postcss/autoprefixer

その上で、grid-template-rows grid-template-columns gapを同じCSSのブロックに記述します。

同じブロックというのは、同じクラス内かつメディアクエリなどの条件も一緒の部分ですね。

// NG
.grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  @media screen and (max-width: 840px) {
    grid-template-columns: 200px;
  }
}

// OK
.grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  @media screen and (max-width: 840px) {
    grid-template-columns: 200px;
    grid-template-rows: auto;
  }
}

原理としては同じブロックにgrid-template-rows grid-template-columns gapを記述しないとAutoprefixerがIE対応のレイアウトに変換できないようです。

CSSの記述方法によっては簡単に対応できそうですが、僕はtailwindを使っていたので全て書き直しでした。

object-fitプロパティ

object-fitはIE対象外です。
簡単に対応するためには、polifillとPostCSSの２つを導入しましょう。
polifillを使うためにはfont-familyでobject-fitの記載が必要になりますが、PostCSSで自動化という流れです。

pictureタグ

pictureタグもIEではサポート外です。

pictureタグを使うためには、polifillを使いましょう。
タグを読み込ませるだけなので簡単に使えます。

SVG画像

SVGのサイズが指定されていないと、大きく表示されてしまうバグが生じます。
SVGのデフォルトのサイズに任せるのではなく、imgタグにCSSできちんと指定しましょう。(imgタグにwidth: 100%親要素にサイズ指定でもOKです。)

まとめ

細かいバグなどは多々あるかもしれませんが、以上のことを気をつけておけばサイト全体で致命的に崩れているということはなさそうです。

この記事をもってIEの供養とします。長年お疲れさまでした。