Internet Explorer(以後IE*)への対応/非対応に関しては、WEB業界の中で度々話題になる問題でしょう。
IEに対応するとは、IEを使用してWEBサイトを閲覧した時にChromeや Safariで閲覧した時と同じように表示させるといった概念です。文章にすると簡単そうに思えるが実際は複雑な背景が絡んでIEでの表示崩れ問題が引き起こります。その中で一つの指標となるのが言語やフレームワークのIE対応状況です。
そこで今回の記事では、有名な言語やフレームワークでのIE対応状況についてまとめみました。是非参考にして下さい。
※IE対応はしないとの選択をする場合は以下のようなアラートを出してあげると親切かと思います。
各ブラウザのサポート状態を見れるサイト
以下のサイトでは、全ブラウザでの言語やフレームワークなどの対応状況を見る事が出来ます。
例えば、以下の様に検索窓に「object-fit」と入れてみればIEの部分は赤になります。(最左)

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

https://gs.statcounter.com
数値にすると以下の様なります。
範囲 | IE | |
---|---|---|
世界シェア | 66% | 1% |
国内/デバイス指定無し | 49% | 5% |
国内/PCのみ | 60% | 8% |
IEに対応していない有名サイト
以下のサイトは誰もが知っているサービス・サイトだと思いますが、軒並みIEのサポートを対象外としています。そのためIEでアクセスすると、注意書きが記載された別ページに飛ばされるor Microsoft Edgeを強制オープンさせる仕様になっています。
Youtube https://www.youtube.com/ | Apple https://www.apple.com/jp/ |
Twitter https://twitter.com | Slack https://slack.com |
サントリー https://www.suntory.co.jp/ | pixiv https://www.pixiv.net |
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について詳しくは以下を参照下さい。
▼プロパティ: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について詳しくは以下。
▼display: grid
display: gridはあらかじめレイアウトを定めることが出来る優れものですがIEではプロパティ自体が非対応です。IEでは全く使えないものなのでIE対応する場合はIE用にもレイアウトを追加する必要があります。
display: gridについて詳しくは以下。
▼カスタムプロパティ変数
カスタムプロパティの宣言は、ハイフン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に対応していません。
プロパティー自体は対応しています。
ChildNode.before | ChildNode.after |
ChildNode.replaceWith | ParentNode.prepend |
ParentNode.append |
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
▼スプレッド構文
ピリオド3つ書くだけで、配列から配列を作成することができる便利な機能ですが、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非対応な構文やプロパティは増えていく一方だと思われます。気が付き次第追加する予定です。