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

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

More than 3 years have passed since last update.

Windows10の強制アップデートのおかげ(?)もあってか、最近のブラウザ対応ではIE9以下はほとんど切り捨てるようになっています。
いろんなAPIやインタラクティブなサイトを作る場合は特に顕著です(そもそも対応してないし)。

そんななか、IE9だけでなくIE8までも対応すべき状況になったときのために、Google検索先人たちの知恵を借りて、対応すべきことと使ってはいけない(というよりは対応していない)CSSプロパティ、JavaScriptのメソッドなどを雑多にあげてみました。情報の粒度なんて知らない。

「IE8だけ動かねぇ...」というものは、たいてい非対応系で生じる不具合ですので、使わないで同じ挙動を実現させるための対策を練りましょう。

やるべきこと

html5shivを入れる

  • 要対策: IE8/IE9

現在のWebサイトの制作では、HTML5によるマークアップが標準となっていますが、IE9以下のブラウザはHTML5で新たに追加されたタグ(articlesectionなど)は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はコロン2つ(::)で記述することができますが、IE8ではコロン2つで指定した擬似要素は認識されません。
特に困ることはないと思うので、IE8対応の際はコロンを1つにしておきましょう。

最後に

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

Why do not you register as a user and use Qiita more conveniently?
  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