Windows10の強制アップデートのおかげ(?)もあってか、最近のブラウザ対応ではIE9以下はほとんど切り捨てるようになっています。
いろんなAPIやインタラクティブなサイトを作る場合は特に顕著です(そもそも対応してないし)。
そんななか、IE9だけでなくIE8までも対応すべき状況になったときのために、Google検索先人たちの知恵を借りて、対応すべきことと使ってはいけない(というよりは対応していない)CSSプロパティ、JavaScriptのメソッドなどを雑多にあげてみました。情報の粒度なんて知らない。
「IE8だけ動かねぇ...」というものは、たいてい非対応系で生じる不具合ですので、使わないで同じ挙動を実現させるための対策を練りましょう。
やるべきこと
html5shivを入れる
- 要対策: IE8/IE9
現在のWebサイトの制作では、HTML5によるマークアップが標準となっていますが、IE9以下のブラウザはHTML5で新たに追加されたタグ(article、sectionなど)はHTMLタグとして認識されません(HTML5が策定される前のブラウザなのであたりまえですが)。
CSSなどのスタイルをつけていてもそれも無効化されちゃいます。
それを認識させるためのプラグインがhtml5shiv.jsです。
headで読み込めば終わりです。
<head>
<!--[if lt IE 9]>
<script src="path/to/html5shiv.js"></script>
<!-- CDNでもあります↓ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
Respond.jsなどでMedia Queryに対応させる
- 要対策: IE8
IE8ではMedia Queryに対応していません。
モバイルファーストでCSSを書いていた場合、「CSSが微妙にあたってるけどほとんどあたってない...」みたいな状況になりかねないので、IE8以下で読み込んでおけば大丈夫かと思います。
<head>
...
<!--[if lt IE 9]>
<script src="path/to/respond.js"></script>
<![endif]-->
</head>
opacityでの透過処理にfilterを追加
- 要対策: IE8
.hover-link {
&:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: alpha(opacity=80);
}
}
ベンダープレフィックスの設定をIE8(or 9)まで下げる
「pleeease」や「autoprefixer-rails」などを使っている場合忘れがちです。
browserlistなどを見て修正しておきましょう。
browsers:
"ie >= 8"
jQueryのバージョンを1.x系にする
- 要対策: IE8
2.x系はIE10〜、3.0以降はIE9〜対応なので、IE8でもjQueryを使う場合は1.x系にバージョンを変えておきましょう。
互換表示モード
- 要対策: IE8/IE9
IEでは互換表示というものがあって、レンダリング方法を前のバージョンに変更できます。
予期せぬレイアウト崩れはこれが原因の場合もあるので、最新のモードで常に表示するように設定しておきましょう。
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
使えないもの
次にやってはいけない・使ってはいけないCSSやJSのメソッドを紹介します。
CSSで使えないプロパティ・値・セレクタ
-
display: flexとflex関連のプロパティ transitionanimation-
background-size(IE8のみ) -
rgba()・rgb()(IE8のみ) -
:checkedなどのCSS3セレクタ(caniuse参照) -
border-radius(IE8のみ) -
box-shadow(IE8のみ)
考えただけでもこれだけあります。
使えなさそうで使える要素
逆に使えなさそうで使えるものはこんくらいあります。
box-sizingdisplay: inline-block-
:before/after - 隣接セレクタ(
selector ~ selector)
javacscriptのメソッド
Object.assignArray.some.bindclassList
jsの基本文でも使用できないものが多くあります。
Polyfillを探して入れるなどで対策しましょう。
before / afterのコロンは2つにしない
- 要対策: IE8
擬似要素のbefore / afterはコロン２つ(::)で記述することができますが、IE8ではコロン2つで指定した擬似要素は認識されません。
特に困ることはないと思うので、IE8対応の際はコロンを1つにしておきましょう。
最後に
まだまだあるきはしますが、何か思いついたら追記していきます。