Help us understand the problem. What is going on with this article?

【css】IEと戦うためのTips集

おはこんばんちは、ゆるすぎて投稿を忘れていたちーずです。(反省)
本日は、IEと戦うためのTipsを、IE滅びろという気持ちを抑えて書きます。

なぜこの記事を書く?

新卒として働き初めてから、新規立ち上げサイトのCSS設計を担当させていただいた経験がありましたが、
その中で一番失敗したこと、反省したことがIE対応だったからです。
自戒の念を込めて、この記事を書こうと思いました。

基本的なIE対応

まずはじめに、基本的なIE対応をする際に考えるべきことをざっくりと説明します。

1. Can I use でプロパティがIEに対応しているかを調べる

caniuse

Can I useとは、HTMLやCSSなどのブラウザ対応状況が調べられるサービスです。
自分が使用したいプロパティがIEに対応しているかを簡単に調べることができるため、ブラウザ対応しているか不安なプロパティを使う際は必ず調べましょう。

  • 緑  : 対応
  • 黄緑 : 部分的に対応 (hoverすると詳細が見れます。)
  • 赤  : 未対応

2. Autoprefixerでベンダープレフィックスを自動で付与する

ベンダープレフィックスとは、-moz--webkit-などのプレフィックス(接頭語)をプロパティや値につけることで、わりと新しめなCSSの機能を特定のブラウザで使用できるようなものであり、Autoprefixerは、指定したブラウザ対応に必要なベンダープレフィックスを自動で付与するツールです。

ツール自体の導入は今回は割愛させていただきます。下記記事がわかりやすいと思います。

CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入

また、対応するブラウザの対象を設定するには、browserlist を用いて設定すると良いでしょう。
設定の書き方は下記記事が分かりやすかったです。

.browserslistrcで対象ブラウザを指定する

また、browserl.istで、browserlistの設定から対応ブラウザの一覧を確認できます。

browserlist

見落としがちなIE対応

ここからはCan I useautoprefixerも教えてくれなくて、自分がまんまとハマってしまった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をimgで表示した場合にIEだけサイズが変になる現象を直す

svgをbackgroundで設定すると、background-positionが効かない

背景画像にsvgを大量に用いていて、left: 0で見出しのアイコンとして用いていたのですが、
IEで確認したところ、中央によっていました...

解消法

svgタグにwidth,height,preserveAspectRatio="xMinYMid"を指定したらなおりました。

IE11で背景に指定したSVGが正しく表示されない件

最後に

IE対応で不具合を起こさないようにするには、実機確認がマストだと感じました。
MacでIE確認できる機能もありますが、スタイル崩れが再現できるとは限りません。
なるべくユーザーと同じようにWindowsで、IEを開いて確認するよう徹底しましょう。

また、アドベントカレンダーは指定の日にちに投稿しましょう.........

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away