今年のはじめくらいに IE は 11 以外がサポート切れたらしいです
Vista に限り IE9 がありますが 今時 Vista でかつ IE 使うような人はほぼいないでしょうし いないものとして扱います
一応あと 1 年です

IE11 は Windows7 から Windows10 まででサポートされて 2020年から2025年までサポート期間があるようです
OS のサポート切れということで 幅があります

IE11 に機能が増えていくならいいのですが 増えるわけもなく CSS などのバグが直るわけもないので IE 向けに作る人はまだまだ苦痛が続くわけです


私は ただで Chrome や Firefox などの新しい機能が使えるのに好みで IE を使い続ける人のサポートをする気はないので 基本的にどうでもいいです
ですが アプリやツール部分はともかく ブログなどのページの基本部分は一応動くようにしておこうかなと思います
ボタン押しても反応しない とかならともかく グチャグチャな表示で全く見れない状態はさすがに避けとこうかなくらいです


そんなわけで IE で動くのと動かないのを簡単にまとめます
気づけば増えていくと思います

動く

calc

CSS の calc は使えます
意外！

Map, WeakMap, Set

ES6 とは違う仕様
ほとんど一緒だけど entries などがなく constructor に配列入れて初期値を設定することもできません

WeakSet はないです

const, let

再定義できないとかブロックスコープとかかんたんに使ってみたところ ES6 と同じみたいです
ただし for-in で const が使えなかったり微妙に違いもあります

about:blank

空白のページが必要なら about:blank が使えます

iframe の src なし状態は about:blank になっています

Command Line API

$0, $1, $2, $3, $4
$, $$
$_
dir

が使えます

$x, dirXml, clear, copy, debug, inspect, keys, values, getEventListeners, monitor, profile, table などはないです

debugger

Console API

基本的なものはひととおり

chrome にないもので console.cd で URL がわかる
command line api で cd もある

location.origin

IE10 までは使えなかったですが 11 では使えます

DOMParser

あるとたまに役立つやつです

IndexedDB

意外にもありました
動作が完全に一緒かは未確認です

Worker

Dedicated worker だけで SharedWorker や ServiceWorker はありません

history API

history.pushState や window.onpopstate や history.state

webStorage

localStorage や sessionStorage

DocumentFragment

Canvas

ArrayBuffer

Uint8Array, Uint16Array, Uint32Array, Uint8ClampedArray

Blob

base64

atob, btoa

flexbox

意外にも使えます
最新の display: flex; の記法で ms プレフィックスも不要です

ただし 変な挙動も多いです

dataset

data-* 属性が使えます

classList

クラスの add/remove/toggle/contains

contains

親方向の closest はないですが子方向の contains はあります
その要素が子孫のどこかにあるかチェックします

hidden

hidden 属性をつけると display: none にできます

動かない

ES6

コレが一番辛い部分ですが 仕方ないので IE でも動かしたいところでは 構文エラーになるアロー関数などは控える必要があります
Promise がない みたいなエラーならそこだけ動かない程度なのでいいのですが 構文エラーになると 全く動かないので 「IEは非対応です」のメッセージ出そうにも表示する処理を実行できなくなります

fetch

xhr に代わる物
URL のデータを json で持ってくるなどが凄く楽になるのですが使えません
ES ではなく HTML5 API とも違うみたい？
whatwg の HTML spec には載ってるけど立ち位置がよくわからない

URL constructor

URL 関数に new が使えません
URL オブジェクトが Math のように本当にただのオブジェクトで関数ではないです
そのせいで
のような URL の相対パス解決ができないです

a タグのプロパティと location のプロパティの違い

存在しないものや動きが違うものがあります
を IE11 と Chrome で実行するとこうなります

	IE11	Chrome
href	"https://sample.com/a?b=c#"	"https://sample.com/a?b=c#d"
protocol	"https:"	"https:"
host	"sample.com:443"	"sample.com"
hostname	"sample.com"	"sample.com"
port	"443"	""
origin	"undefined"	"https://sample.com"
pathname	"a"	"/a"
search	"?b=c"	"?b=c"
hash	""	""

また同じ IE でも location とは動きが違ってます

• location では port は省略すると空文字です
• location では origin が使えます
• location では pathname は / から始まります
• location では search や hash は ? や # だけでも ? や # が表示されます

search や hash の動きだけが a タグのほう それ以外は location に合わせると chrome になります

a タグの username と password

また a.username, a.password は空文字でなく undefined です
href に http://a:b@sample.com などを入れると

セキュリティの問題が発生しました。

とエラーがでて href や pathname などどれも読み取れなくなります
username と password は存在しないプロパティなのでエラーなしで undefined を取得できます

location

a タグのところに書いたように search と hash で ? や # だけのときに空文字にならず ? や # だけの文字列が取得されてしまいます

また location に defineProperty でプロパティを定義しようとすると

このオブジェクトではサポートされていない操作です。

とエラーです
なので search や hash の動きを Chrome に合わせることはできないです

IE 10 で origin 追加する場合だと historyAPI でオリジンは変わらないはずなので location.origin に直接代入すればよかったですが 既存のものだと代入するとページの URL が変わってしまうので getter が作れないとできないです

remove

要素の remove メソッドがありません
ですが代わりに removeNode メソッドがあります

remove は Element.prototype.remove ですが
removeNode は HTMLElement.prototype.removeNode です

HTMLElement は Element を継承しているので実装箇所がひとつずれてます

Element で HTMLElement でないものなんてないかなと思いましたが XML パースしてみたらただの Element が取得できました
elem は Element のインスタンスです

あと document は Element を通しません
HTMLDocument → Document → Node

その他 DOM メソッド

closest, matches, append, prepend, after, before, replaceWith

reportValidity

validity 関連です
checkValidity などはあるのに reportValidity がありません

SVG animation

アニメーションありの SVG 画像は動かないですが表示はされます

main tag

template tag

template の特殊な動きをしないので js でどうにかするのも大変
tbody の内側などの配置できる要素が限定されているところに設置すると勝手にタグの場所を変更されてしまう

Shadow DOM

Data URI Scheme

img タグへの埋め込みはできますがページとして表示できません
URL 入力するところに data uri スキームを打ってもエラーページになります

EventTarget

コンストラクタがありません
window.EventTarget は存在せず addEventListener などは Node がもつメソッドになっています

IE バージョンの見分け方

IE にのみあるプロパティでバージョンがわかります

まずこのプロパティが存在すると IE とわかります
プロパティの値が 11 だと IE11 です
9 だと IE9 で 8 だと IE8 という感じで IE のバージョンになっています

この値を使って IE バージョンによって分岐することができます
IE11 はサポートするけどそれ以外は知らないって場合はこんなコードを最初に実行しておくと良いかもです
Windows10 の MSEdge は IE 独自のプロパティはほとんど消えていて documentMode もありません