古の技術になりつつあるIE8・IE9対応でやること、使えないもの #CSS

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以下で読み込んでおけば大丈夫かと思います。

Respond.js

<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関連のプロパティ
transition
animation
background-size (IE8のみ)
rgba()・rgb() (IE8のみ)
:checkedなどのCSS3セレクタ(caniuse参照)
border-radius (IE8のみ)
box-shadow (IE8のみ)

考えただけでもこれだけあります。

使えなさそうで使える要素

逆に使えなさそうで使えるものはこんくらいあります。

box-sizing
display: inline-block
:before / after
隣接セレクタ(selector ~ selector)

javacscriptのメソッド

Object.assign
Array.some
.bind
classList

jsの基本文でも使用できないものが多くあります。
Polyfillを探して入れるなどで対策しましょう。

before / afterのコロンは2つにしない

要対策: IE8

擬似要素のbefore / afterはコロン２つ(::)で記述することができますが、IE8ではコロン2つで指定した擬似要素は認識されません。
特に困ることはないと思うので、IE8対応の際はコロンを1つにしておきましょう。

最後に

まだまだあるきはしますが、何か思いついたら追記していきます。