Bootstrap 5ではIE11のサポート終了も判明、Bootstrap 5をIE11に対応させる方法が用意されている

Post on:2020年3月31日

はじめに

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で動作するようには設計されていませんが、以下のポリフィルを加えることで動作させることができます。

v5: drop Internet Explorer support

<!-- 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>