Bootstrap 5ではIE11のサポート終了も判明、Bootstrap 5をIE11に対応させる方法が用意されている
Post on:2020年3月31日
sponsors
先日、Bootstrap 5のリリースについて紹介しましたが、IE10のサポート終了だけでなく、IE11のサポートも終了することに決まったようです。サポートが終了する経緯と今後の影響、IE10とIE11の使用状況、Bootstrap 5をIE 11に対応させる方法を紹介します。
Bootstrap 5 dropping IE 10 & 11 browser support
by @zolidev
はじめに
Bootstrap 5がいつリリースされるのかという記事（翻訳版）でも触れましたが、この新しいバージョンではInternet Explorer 10だけでなく、11のサポートも終了されることが明らかになりました。
参考: v5: drop Internet Explorer support
Credits to Undraw
サポートが終了される経緯と今後の影響について詳しく説明する前に、IE10とIE11の使用状況を確認しておくことが重要だと考えています。
IE10とIE11の使用状況
W3counterによるIEのシェアを見ると、IE10の使用は2017年から1％を大幅に下回っています。
さらに重要なのは、IE11は2015年の9%から2017年には2-3%に低下しましたが、2018年以降はこの範囲内で安定していることです。
Microsoftは公式にEdgeをプライマリブラウザとして使用することを推奨していますが、IE11のサポートは2025年10月14日のWindows10のサポートが終了した場合にのみ限られています。つまり、2020年現在、IE11のサポート期間は5年間続く可能性があるということです。
参考: いよいよ？まだまだ？IE11のサポート終了までのカウントダウンが始まる
ブルー: IE10、レッド: IE11、イエロー: Edge
W3Ctrends
私の周りでは、IE11を使用している人はいません。まだIE11を使用している人はいるのでしょうか？ 使用しているブラウザを気にしない人だけなのか、企業がインフラの更新に投資しなくないのか、両方のケースが重なっているような気がします。
IE11は、ハードウェアのアップデートが高価な新興市場や、大企業のエンタープライズソリューションの実装内では、依然として使用されています。言い方は悪いですが、IE11は今後数年間、おそらく2025年までは月ごとにゆっくりとシェアが減少していくでしょう。
IEをサポートしないBootstrap 5
では、わたし達Webデベロッパーはどうすればよいでしょうか？
世界で最も広く使用されているCSSフレームワークのBootstrapはIEの最後の2つのバージョンのサポートを終了します。
Webデベロッパーのほとんどは、IEの対応しなければならないことがどれほどの苦痛であったかを知っています。IEに対応することで、開発は楽しくなく、プロジェクトの時間も大幅に増加しました。
今回の決定によりBootstrapの開発は改善され、今後数年でIE11のシェアが確実に減少することを考えると、要求される機能がますます少なくなります。
しかし、特に企業を対象としてプロジェクトでは、ブラウザのサポートが必要になる状況がまだあるかもしれません。
その場合は、どうすればよいでしょうか？
Bootstrap 5をIE 11に対応させる方法
Bootstrap 5でIEのブラウザサポートは終了しますが、IE11で動作させる方法はドキュメントが用意されています。
数週間前にコミットされた方法を紹介します。
Bootstrap v5 isn't designed to work with Internet Explorer 11, but you can add the following polyfills to make it work:
Bootstrap v5はInternet Explorer 11で動作するようには設計されていませんが、以下のポリフィルを加えることで動作させることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!-- Polyfill.io will load polyfills your browser needs --> <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script> <script> // Fix preventDefault for IE (function () { var workingDefaultPrevented = (function () { var e = document.createEvent('CustomEvent') e.initEvent('Bootstrap', true, true) e.preventDefault() return e.defaultPrevented })() if (!workingDefaultPrevented) { var origPreventDefault = Event.prototype.preventDefault Event.prototype.preventDefault = function () { if (!this.cancelable) { return } origPreventDefault.call(this) Object.defineProperty(this, 'defaultPrevented', { get: function () { return true }, configurable: true }) } } })() </script> |
IE11をサポートするための回避策は、Polyfill.ioを使用することになるようです。
結論として、これはWebの進化に向けた良い一歩であり、フロントエンドのWebデベロッパーにとっても明るい展望だと思います。プロジェクトによってはまだIE11が必要な場合がでてくると思いますが、回避策が存在し、Bootstrapの開発チームがソリューションを提供するようです。
sponsors
