2000 年代の Web 制作では、Internet Explorer (IE) への対応に多くの手間がかかりました。IE6 のころは、ほかのブラウザーで正しく表示されるページが IE でだけ崩れる、ということが珍しくありませんでした。その流れが大きく変わり始めたのが、Web 標準への対応を前面に出した Internet Explorer 9 です。ここでは、IE9 から今の Microsoft Edge までの移り変わりを振り返り、今ブラウザーの対応状況をどう確かめればよいかを説明します。

IE9 で Web 標準への対応が進んだ

IE9 は 2011 年に公開されました。IE8 までは、HTML5 や CSS3 の新しい機能の多くが使えず、Flash や独自の拡張、画像を使った工夫で補う必要がありました。IE9 では、次のような機能が使えるようになりました。

  • video 要素と audio 要素による動画・音声の再生
  • canvas 要素による描画と、HTML の中に直接書く SVG
  • border-radius (角丸) や box-shadow (影)、rgba() の色の指定
  • メディアクエリや、:nth-child() などの CSS3 のセレクター
  • 標準の addEventListener() (IE8 までは独自の attachEvent() を使う必要があった)

描画にグラフィックス用のハードウェアを使うようになり、JavaScript の処理も大幅に速くなりました。一方で、CSS のトランジションやアニメーション、Flexbox などは、まだ使えませんでした。

IE10・IE11 と、新しい Edge

IE10 では CSS のトランジションやアニメーションが使えるようになり、IE だけを対象に HTML を書き分ける「条件付きコメント」は、標準モードでは働かなくなりました。IE に合わせた特別扱いを減らしていく方向がはっきりしてきた時期です。

2013 年に公開された IE11 が、最後の Internet Explorer になりました。2015 年に Windows 10 とともに登場した Microsoft Edge は、IE とは別に作られた新しいブラウザーで、表示のエンジン (ページを解釈して描画する部分) には EdgeHTML が使われました。

その後、Microsoft は Edge のエンジンを、Google Chrome と同じ Chromium に切り替えました。Chromium を使う Edge は 2020 年 1 月に公開され、macOS などでも使えるようになりました。表示のエンジンが同じになったことで、Edge でだけ表示が崩れる、ということはほとんどなくなりました。

IE のサポート終了

IE11 のデスクトップアプリは、2022 年 6 月に、多くの Windows 10 でサポートが終わりました。今は、IE を前提に作られた古い業務用のシステムなどのために、Edge の中で IE の表示を再現する「IE モード」が用意されています。

一般の Web サイトでは、IE に対応する必要はもうありません。古い CSS や JavaScript に残っている IE 向けの記述 (条件付きコメント、filter による透明度の指定、attachEvent() の分岐など) は、整理してかまいません。

今、ブラウザーの対応状況を確かめる方法

対応すべきブラウザーが減った今でも、新しい機能はブラウザーごとに使えるようになる時期が違います。使いたい機能があれば、次の資料で確かめます。

  • MDN Web Docs の互換性の表: 各機能のページの下のほうに「ブラウザーの互換性」の表があり、ブラウザーごとに、どの版から使えるか、注意点は何かがわかる
  • Baseline: 主要なブラウザー (Chrome、Edge、Firefox、Safari と、そのスマートフォン版) のすべてで使えるかを示す目印。すべての最新版で使えるようになった機能は「Newly available」、そこから 30 か月たった機能は「Widely available」と表示される。MDN のページの上部などに表示されている
  • Can I use: 機能の名前で検索すると、ブラウザーと版ごとの対応状況を一覧で見られる。利用者の割合をもとにした対応率も表示される

迷ったら、Baseline で「Widely available」になっている機能は、多くのサイトで安心して使えると考えてよいでしょう。「Newly available」の機能は、古い版を使っている利用者がいることを考えて、使えない場合にも困らない作りにしておきます。

使えるかどうかは、機能そのもので確かめる

ブラウザーの名前や版 (User-Agent の文字列) で処理を分ける方法は、判定の間違いが起きやすく、今は勧められません。CSS では @supports、JavaScript では、使いたい機能があるかどうかを直接確かめます。

/* 見出しの行の長さをそろえる指定が使えるときだけ適用する */
@supports (text-wrap: balance) {
  h1,
  h2 {
    text-wrap: balance;
  }
}

// 共有の機能 (Web Share API) があるときだけ、共有のボタンを出す
const button = document.querySelector(".js-share");
if (navigator.share) {
  button.hidden = false;
  button.addEventListener("click", () => {
    navigator.share({ title: document.title, url: location.href });
  });
}

共有のボタンには、HTML で hidden 属性を付けておき、使える環境でだけ表示します。このように、使えない環境では基本の表示に戻るように作っておくと、ブラウザーの移り変わりに振り回されにくくなります。

まとめ

  • IE9 で、HTML5 や CSS3 の多くの機能と標準の addEventListener() が使えるようになった
  • IE11 が最後の IE。Edge は 2020 年に Chromium を使う形に変わり、IE11 は 2022 年 6 月にサポートが終わった
  • 一般のサイトでは、IE 向けの記述は不要。古いコードからは整理してよい
  • 対応状況は MDN の互換性の表、Baseline、Can I use で確かめ、処理は @supports などの機能の有無で分ける

参考