HTML
CSS
JavaScript

2016年以降に「IE8に対応して」といわれたとき思い出したい六項目

More than 1 year has passed since last update.

日本では、2016年1月13日でIE8の正式サポートが終了しました。
それでも、まだIE8でもちゃんと閲覧できるサイトを作って欲しいと言われることがあります。

正式なサポートが終了したブラウザを使うリスクや対応工数を考えると、
クライアントには「IE8は対応外です」としっかり説得すべきです。
でも、大人の事情で対応することになった際に、気をつけるべきことをまとめました。

2016年以降に「IE8に対応して」といわれたとき思い出したい六項目

1. IE8は対応外と突っぱねるべし

一番良いIE8対策は、動作確認対応外にすることだと思います。
公式サポートが止まったことで予期せぬ攻撃を受け、そのリスクを誰が負うのかクライアントさんにも説明してください。
ブラウザシェアなどをお見せして、そろそろ推奨環境をアップデートしませんかと説得してみてください。
古いユーザーさんに支えられているサービスは…頑張って対応してください。

2. HTML5とCSS3が使えない

ついくせで<header>とマークアップしても正しくレンダリングされません。
divでマークアップし直しが安全ですが、IE8のみHTML5shiv.jsを読み込ませるという手もあります。
(使うなら、印刷サポートのあるhtml5shiv-printshiv.jsがおすすめです。)
IE8もbox-sizingは使えますが、その他気の利いたプロパティが使えないので注意が必要です。(特に背景画像まわりがつらい)
opacityも思わぬ動きをすることがあります。

↓IE8で注意が必要なCSSについてはこちらのページがよくまとまっていました
これって使えたっけ?今だからこそ IE8 対応コーディングのポイントをおさらい

[9/16 追記]
IE8,9 でもCSS3が動くようにするCSS3 PIEというツールもありましたね。
個人的には、初期導入のハードルが高め&導入コストと効果が釣り合っていないような気がして避けていました。

HTML4.0やXHTMLでのマークアップは、lintツールを通すと安心ですね。
Another HTML-lint gateway

3. JavaScript対応が一番しんどい

IE8対応でかなり工数を取られるのがJavaScript対応です。
よく使われるJSフレームワーク(react、riot、vue、Angular2)の最新版はIE8非対応です。
jQueryは、1.x系までが対応。

メソッドが使えるかどうかの確認はECMAScript 5 compatibility tableでチェックできます。
IE8はES3をベースに動作しているので、書いたソースをECMAScript Version Detectorでをみると、早めのエラーチェックになるかも。(ES5や201Xで書かれていたら、動きません)
IE8で書けないことを詳しく知るにはIE10 以下を切る場合の JavaScript チェックリストがまとまっていました。

また、気をつけて書いたJavaScript も圧縮したりbabel でビルドすると動かないコードに変換されてしまうことがあります。

gulp-uglify で圧縮するとIE8非対応になることがありますが、gulp-uglify-ctl だったらオプションでIE8対応になります。

var uglify = require('gulp-uglify-cli');

gulp.task('uglify', function(){
  gulp.src(src)
      .pipe(uglify({
        screwIE8 : true
      }))
      .pipe(gulp.dest(dest));
};

babelでは、ES2015のclass構文を使うとIE8で読めないコードに変換されます。
参考:Babel で IE8 対応する地獄

4. 互換モードかもしれない

長らくIEを使っていないと、互換モードという存在を忘れがちです。
HTMLもCSSも、JavaScriptもどこにも表示崩れの原因が見当たらないとき、もしかしたらIEが下位のブラウザとの互換モードかもしれません。

ページのdoctypeの指定によっては、初期から互換モードで描画されることがあります。
参考:IE8の3つレンダリングモードを理解する

これを避ける方法として、head内に

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

と書くことで最新のブラウザ(IE8しか入っていない場合はIE8)でレンダリングされるようになります。
また、開発者ツールでドキュメントモードを変更していると、互換モードが上書きされます。

5. 確認環境はvirtual machinesを使う

確認はmodernIE(旧)ことmicrosoftが配布しているvirtual machinesが使えます。
IE8〜edgeの仮想環境を作ることができます。

過去に、IEtesterを使っていた頃もありますが、たまに実際のブラウザと異なる動きをしていたので、実機がない場合はvirtual machines の使用がおすすめです。

IE 確認用の仮想マシンの構築 (modern.IE)

6. 一緒に開発する人にもIE8対応と伝える

IE8対応のサイトを他の人に手伝ってもらうときは、IE8対応ということを伝えてください。
実際にIE8で動作確認してもらい、問題ないことを確認してからソースを引き取りましょう。
善意でサポートしていただいた箇所が、IE8に対応しておらず
リリース前に作りなおすことがありました。。
自分が気をつけても、チームメンバーが罠にかかってしまうことがあります。


少し前まで、みんな当たり前のようにIE8対策の技術を持っていましたが
だんだんその貴重な記憶が薄れつつあるように思います。

ここもハマりやすい!という情報をお持ちの方、
編集やツッコミいただけますと幸いです。