【2021年】IEの対応状況をまとめてみました

Internet Explorer（以後IE*）への対応/非対応に関しては、WEB業界の中で度々話題になる問題でしょう。

IEに対応するとは、IEを使用してWEBサイトを閲覧した時にChromeや Safariで閲覧した時と同じように表示させるといった概念です。文章にすると簡単そうに思えるが実際は複雑な背景が絡んでIEでの表示崩れ問題が引き起こります。その中で一つの指標となるのが言語やフレームワークのIE対応状況です。

そこで今回の記事では、有名な言語やフレームワークでのIE対応状況についてまとめみました。是非参考にして下さい。

※IE対応はしないとの選択をする場合は以下のようなアラートを出してあげると親切かと思います。

【コピペ】ブラウザ判別して「IE対応してません！」と伝えるコード

今回は、表示しているブラウザがInternet Explorerかどうかを判断して、IEでWEBサイトを表示した場合に「このサイトはInternet Explorerに対応していません」とのことを伝える文言を表示する方法を紹介します。...

kt-life.net

2021.03.11

各ブラウザのサポート状態を見れるサイト

以下のサイトでは、全ブラウザでの言語やフレームワークなどの対応状況を見る事が出来ます。
例えば、以下の様に検索窓に「object-fit」と入れてみればIEの部分は赤になります。（最左）

Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

caniuse.com

IEのシェア率

以下のグラフは過去10年間のブラウザのシェア率です。青がIEなのですが、急降下しているのがハッキリ理解出来ます。（緑がGoogle）

数値にすると以下の様なります。

IEに対応していない有名サイト

以下のサイトは誰もが知っているサービス・サイトだと思いますが、軒並みIEのサポートを対象外としています。そのためIEでアクセスすると、注意書きが記載された別ページに飛ばされるor Microsoft Edgeを強制オープンさせる仕様になっています。

IE対応状況の参考サイト/ドキュメント

当記事を見ても信頼性に欠けると言う方へ。以下では参考サイトと公式ドキュメントをまとめています。何かでクライアント様が納得いくデータが見つかるかと思います。

▼JavaScript非対応構文

IEで使用出来ないJavaScriptを分かり易く掲載されていましたので参考にしました。
https://qiita.com/siruku6/items/3465fd6e0588ee35cc78

▼css3ブラウザ対応状況

以下のサイトではCSSのブラウザ対応状況が一覧で分かります。IEに関しては、ちらほら使えない記述があるので注意が必要です。
http://www.htmq.com/css3/browser.shtml

▼Bootstrap5は完全非対応

Bootstrap5の公式ドキュメント内にサポート対象のブラウザについてが記述されています。IEに関しては11以下のバージョン全てが非対応だと言う事が分かります。
https://v5.getbootstrap.jp/docs/5.0/getting-started/browsers-devices/

▼ECMAScript対応状況

以下のサイトではJavaScriptの元であるECMAScriptの対応状況が一覧で記述されています。これに関してはIEは絶望的な程非対応なので諦めざるを得ないプログラムが多く出てきそうです。
http://kangax.github.io/compat-table/es6/

CSSで使えないプロパティ

ここからは具体的にIEで使用できないCSSのプロパティを紹介します。

▼object-fit

object-fitは画像をボックスサイズ丁度にトリミングをしてくれる優れものです。最近のWEB制作では画像のサイズ調整での使用頻度がかなり多いので画像が表示崩れしていたら、まずこのプロパティを疑います。

.container-item-img img{
    display: block;
    height: 150px;
    width: 100%;
    object-fit: cover;
}

object-fitについて詳しくは以下を参照下さい。

画像のトリミングが出来るobject-fitの使い方(IE非対応)

今回はCSSのみを使用して画像のトリミングが出来るobject-fitというプロパティを紹介します。このプロパティを使用すれば、一々ちょうど良いサイズに画像をトリミングしてからアップロードする必要が無くなり、WEB上に綺麗に配置する事出来る様になります。

kt-life.net

2020.11.22

▼プロパティ：initial

cssプロパティを初期値に戻すinitialはIEでは非対応です。initialを使用しないコーディングも可能ですが、スマホ対応時などに「スマホでは〇〇の値を初期化する」などの指定をしてレスポンシブ対応する場合もあるので、それが原因でIEで表示崩れが起きるパターンもあります。

<p>このテキストは赤です。
<span>このテキストは初期値 (ふつうは黒) です。しかしIEでは赤です。</span>
これは再び赤です。
</p>

p {
  color: red;
}
span {
  color: initial;
}

▼keyframes 内の calc()

IE11ではcalc() 自体には対応しているのですが、アニメーションさせようとkeyframes内に calc() を使うと動かなくなります。

<p><span class="ball"></span></p>

@keyframes move {
  from { left: 0; }
  to { left: calc(150px + 100px); }
/*  to { left: 250px; } */
}
p {
  position: relative;
  width: calc(200px + 100px);
  height: 50px;
  background: #ccc;
}
span.ball {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

▼display: flex

display: flexには多くのバグがあるようです。具体的には多すぎてここでは割愛しますが、レイアウトが大きく崩れる要因なのでIEを対応したい場合はなるべく使用を避けましょう。

display: flexについて詳しくは以下。

CSSで思い通りのレイアウトを作成する方法：Flexboxまとめ

今回は、CSSで思い通りのレイアウトを可能とするFlexbox（フレックスボックス）の使い方を紹介します。種類が豊富なので覚えるのが大変だが、慣れると簡単に思い通りのレイアウトを作成できるのでコーディングの技術ではほぼ必須で覚えるべき技術かと思います。

kt-life.net

2020.04.13

▼display: grid

display: gridはあらかじめレイアウトを定めることが出来る優れものですがIEではプロパティ自体が非対応です。IEでは全く使えないものなのでIE対応する場合はIE用にもレイアウトを追加する必要があります。

display: gridについて詳しくは以下。

Grid-templateの使い方：レスポンシブ対応レイアウト構築法

今回は、Grid-templateと言われるCSSプロパティを使って超簡単にサイト全体をレスポンシブ対応のレイアウトにする方法を紹介します。今回紹介する方法はflexboxの様にCSSの記述が多く無く、ほんの数行で全く同じ事が可能になる革新的なレイアウト構築法です。「Grid」はもっと便利にもっと効率的にコーディングを行うための新技術です。

kt-life.net

2020.05.18

▼カスタムプロパティ変数

カスタムプロパティの宣言は、ハイフン2つ (--) で始まるカスタムプロパティ名と、何らかの有効なCSS値になるプロパティ値を使用することで行われます。

<em>element</em> {
  --main-bg-color: brown;
}

非常に効率的にコーディングを行える便利な仕様なのですがIEでは非対応です。IE対応する場合は、これまでに従来（旧式）のやり方でコーディングする必要があります。

▼svg

また、svgにも注意が必要です。IE11以外ではwidthを指定すればheightも自動的に変化するのですが、IE11では数値で指定しないとダメなようです。

▼参考サイト
https://www.imuza.com/entry/2018/11/07/122725

JavaScriptで使えない構文

▼var()

let、constが出てくる前に使用されていた変数を定義する際に使用されるキーワードです。
現在ではIEでのサポートは終了しているので使用できません。

var [a, b] = ['a', 'b'];
console.log(a);
console.log(b);
var { name: name, height: height, weight: weight } = {
  name: 'kirby',
  height: '80',
  weight: '99999'
};

▼promise

ES6から登場したJavascriptの仕様で、非同期処理を行うことでコールバックを解決してくれる優れたオブジェクトなのですがIE11では非対応です。

const promise = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    resolve("✋");
  }, 300);
});
promise.then(emoji =>{
  console.log(emoji); // ✋
});

▼fetch

fetchとはXMLHttpRequestのようなJavascriptの仕様で、XMLHttpRequestよりも簡単にAPIなどの読み込みを実装することができるので非常に注目を浴びていますが、IE11では非対応です。

fetch('url')
  .then((response) => response.text())
  .then((text) => console.log(text))
  .catch((error) => console.log(error));

▼arrow（=>）

arrowもES6から登場したJavascriptの仕様で、functionを=>に置き換えることのできる仕様です。最近のJSライブラリでは半分くらいがアロー関数で書かれているので、殆どの場合はIEで使用出来ないことになってしまいます。

const func = ABC => console.log(ABC);
func("ABCDEFG");
// "ABCDEFG"

▼ParentNode, ChildNodeのメソッド

取得した要素の親または子要素を取得するプロパティーParentNodeとChildNodeの以下のメソッドはIE11に対応していません。
プロパティー自体は対応しています。

const element = document.getElementById("emoji");
const newElement = document.createElement("p");
newElement.textContent = "✊" ;
element.before(newElement);

▼intersection observer

intersection observerとは画像や動画の遅延読み込みなど、スクロールイベントを簡単に実装できるJavascriptのAPIです。Scroll Jank（Javascriptの実行スピードが スクロールより遅くて画面が固まること）が起こらない優れたAPIでしたが、IE11では非対応です。

var observer = new IntersectionObserver(changes => {
  for (const change of changes) {
    console.log(change.time);
    console.log(change.rootBounds);
    console.log(change.boundingClientRect);
    console.log(change.intersectionRect);
    console.log(change.intersectionRatio);
    console.log(change.target);
  }
}, {});
var target = ...;
observer.observe(target);
observer.unobserve(target);
observer.disconnect();

▼class

今までコンストラクタやメソッドをfunctionで頑張って実装していましたが、ES6からClass構文が導入されて簡単に実装できるようになりました。しかしIEではサポートされていません。

class emoji {
}

▼find

任意の配列から欲しい要素を取得する際に便利なfindですが、IE11ではサポートされていません。

["A", "B", "C"].find( x => console.log(x==="A"));
// true
// false
// false

▼for-of

配列やNodeListなど反復可能なオブジェクトをループで簡単に処理できるfor-ofですが、IE11では使用できません。

for( let ABC of ["A", "B", "C"]){
  console.log(ABC);
}
// "A"
// "B"
// "C"

▼include

任意の配列に特定の要素が含まれているかどうかをBooleanで返してくれるincludeですが、IE11では使用できません。

const arr = ["A", "B", "C"];
console.log(arr.includes("A")); //true

▼スプレッド構文

ピリオド３つ書くだけで、配列から配列を作成することができる便利な機能ですが、IEでは非対応です。

const arr = ["A", "B", "C"];
const copy_arr = [...arr]; //["A", "B", "C"]

▼テンプレートリテラル

バッククォート内で変数や関数を文字列と連結させて簡単に記述できるテンプレートリテラルですが、IEでは非対応です。

const name = "山田太郎";
console.log(`こんにちは私の名前は${ name }です`); //こんにちは私の名前は山田太郎です

▼before/after/prepend/append

jQueryの要素を追加するメソッド達ですがどれもIEでは非対応でした。

var $element = document.getElementById('element1');
$element.before('<span>content</span>')
var $element = document.getElementById('element1');
$element.after('<span>content</span>')

▼replaceWith

要素を指定された別のエレメントやHTMLと差し替える使用ですが、IEでは非対応でした。

var $element = document.getElementById('test01');
$element.replaceWith('<span>content</span>')

▼array

複数の値を管理するためのデータ構造を持たすことが出来る仕様ですが、IEでは非対応でした。

var some_array = [1, 2, 3];
var copy_array = [...some_array];

▼RadioNodeList

ラジオボタン要素の集合を表す非常に便利なオブジェクトですが、IEでは動かないバージョンもあるようです。

<form id="target">
  <input name="number" type="radio" value="01"> 選択1
  <input name="number" type="radio" value="02"> 選択2
  <input name="number" type="radio" value="03"> 選択3
</form>

var $element = document.getElementById("target") ;
var radioNodeList = $element.number ;
console.log(radioNodeList[0]);

▼Set

set() メソッドは、指定されたキーと値を持つ要素をMapオブジェクトに追加したり、更新したり出来る使用ですがIEでは非対応でした。

var names_set = new Set(['Roman', 'Elysion', 'Moira'])
console.log(names_set.size);
# IE11
-> 0
# Chrome
-> 3

▼参考サイト
https://qiita.com/siruku6/items/3465fd6e0588ee35cc78

以上が「2021年のIE対応状況をまとめてみました」でした。

因みに、IEの後続アプリであるedgeは同じMicrosoft開発のアプリですが、公式ページでIEの使用を非推奨しています。更に今後もWEBは進化し続けるので、いつの日か完全非対応になると思われます。これらの背景から、基本的にIEへの対応は無しで良いと考えます。

今後もIE非対応な構文やプロパティは増えていく一方だと思われます。気が付き次第追加する予定です。