Bearbeiten von „Outdated Browser“

== IE 10 / IE 11 ==
<syntaxhighlight lang="css">
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
  /* IE10+ specific styles go here */  
  #outdated{
    display: block!important;
    margin: 2em auto;
    max-width: 640px;
  }
  #page{
      display: none!important;
  }

}
</syntaxhighlight>

Oder:

 https://getbutterfly.com/how-to-show-an-outdated-browser-alert-on-internet-explorer-11/


Next, as the title says, here’s how to detect an IE 11 browser:

<syntaxhighlight lang="javascript">
// Method #1: Detect IE 10 and IE 11
function isIE() {
    // IE 10 and IE 11
    return /Trident\/|MSIE/.test(window.navigator.userAgent);
}
</syntaxhighlight>

Or IE 11-only:

<syntaxhighlight lang="javascript">
let isIE11 = (function () {
    // true on IE11, false on Edge and other IEs/browsers.
    let isIE11 = !!window.MSInputMethodContext && !!document.documentMode,
        ua = window.navigator.userAgent;

    if (ua.indexOf("AppleWebKit") > 0) {
        return false;
    } else if (ua.indexOf("Lunascape") > 0) {
        return false;
    } else if (ua.indexOf("Sleipnir") > 0) {
        return false;
    }

    array = /(msie|rv:?)\s?([\d\.]+)/.exec(ua);
    version = (array) ? array[2] : '';

    return (version === 11) ? true : false;
});
</syntaxhighlight>

Next, we need to display an outdated/unsupported browser alert:

<syntaxhighlight lang="javascript">
let showBrowserAlert = (function () {
    if (document.querySelector('.unsupported-browser')) {
        let d = document.getElementsByClassName('unsupported-browser');

        is_IE11 = isIE11();

        if (is_IE11) {
            d[0].innerHTML = '<b>Unsupported Browser!</b> This website will offer limited functionality in this browser. We only support the recent versions of major browsers like Chrome, Firefox, Safari, and Edge.';
            d[0].style.display = 'block';
        }
    }
});

document.addEventListener('DOMContentLoaded', showBrowserAlert);
</syntaxhighlight>

Don’t forget to add an empty <div class="unsupported-browser"></div> right after the opening <body>.