おはこんばんちは、ゆるすぎて投稿を忘れていたちーずです。(反省)
本日は、IEと戦うためのTipsを、IE滅びろという気持ちを抑えて書きます。
なぜこの記事を書く？
新卒として働き初めてから、新規立ち上げサイトのCSS設計を担当させていただいた経験がありましたが、
その中で一番失敗したこと、反省したことがIE対応だったからです。
自戒の念を込めて、この記事を書こうと思いました。
基本的なIE対応
まずはじめに、基本的なIE対応をする際に考えるべきことをざっくりと説明します。
1. Can I use でプロパティがIEに対応しているかを調べる
Can I useとは、HTMLやCSSなどのブラウザ対応状況が調べられるサービスです。
自分が使用したいプロパティがIEに対応しているかを簡単に調べることができるため、ブラウザ対応しているか不安なプロパティを使う際は必ず調べましょう。
- 緑 : 対応
- 黄緑 : 部分的に対応 (hoverすると詳細が見れます。)
- 赤 : 未対応
2. Autoprefixerでベンダープレフィックスを自動で付与する
ベンダープレフィックスとは、-moz-や-webkit-などのプレフィックス(接頭語)をプロパティや値につけることで、わりと新しめなCSSの機能を特定のブラウザで使用できるようなものであり、Autoprefixerは、指定したブラウザ対応に必要なベンダープレフィックスを自動で付与するツールです。
ツール自体の導入は今回は割愛させていただきます。下記記事がわかりやすいと思います。
また、対応するブラウザの対象を設定するには、browserlist を用いて設定すると良いでしょう。
設定の書き方は下記記事が分かりやすかったです。
また、browserl.istで、browserlistの設定から対応ブラウザの一覧を確認できます。
見落としがちなIE対応
ここからはCan I useもautoprefixerも教えてくれなくて、自分がまんまとハマってしまったIE対応をご紹介します。
flexショートハンドでdefault値を省略するとIEで崩れる
flexプロパティのショートハンドでは、以下のような順で指定ができます。
.example {
flex: flex-grow flex-shrink flex-basis;
}
省略してflex: 1と書くこともできますが、default値を省略するとIEでバグります。
/* NG */
.example {
flex: 1;
}
/* OK */
.example {
flex: 1 1 auto;
}
私はこれで、footerを固定するような書き方をしていましたが、
MVが大幅に崩れる不具合を出してしまいました。。。
あの背筋が凍った経験を2度と忘れません。。。
(GAを確認したら、なぜかCVR上がってましたが...)
imgタグでsvgを指定すると崩れる
imgタグでsvgを指定し、IEで確認してみたら、なんと指定範囲からはみ出たサイズ表示になっていました。
解消法
下記記事を参考に、svgタグにwidth,height,viewboxを指定したらなおりました。
svgをbackgroundで設定すると、background-positionが効かない
背景画像にsvgを大量に用いていて、left: 0で見出しのアイコンとして用いていたのですが、
IEで確認したところ、中央によっていました...
解消法
svgタグにwidth,height,preserveAspectRatio="xMinYMid"を指定したらなおりました。
最後に
IE対応で不具合を起こさないようにするには、実機確認がマストだと感じました。
MacでIE確認できる機能もありますが、スタイル崩れが再現できるとは限りません。
なるべくユーザーと同じようにWindowsで、IEを開いて確認するよう徹底しましょう。
また、アドベントカレンダーは指定の日にちに投稿しましょう.........