Outdated Browser: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „== IE 10 / IE 11 == <syntaxhighlight lang="css"> @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ specific st…“) |
|||
| Zeile 72: | Zeile 72: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | Don’t forget to add an empty <div class="unsupported-browser"></div> right after the opening <body>. | + | Don’t forget to add an empty |
| + | <div class="unsupported-browser"></div> | ||
| + | right after the opening <body>. | ||
Aktuelle Version vom 7. Mai 2021, 17:09 Uhr
IE 10 / IE 11[Bearbeiten]
@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;
}
}
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:
// Method #1: Detect IE 10 and IE 11
function isIE() {
// IE 10 and IE 11
return /Trident\/|MSIE/.test(window.navigator.userAgent);
}
Or IE 11-only:
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;
});
Next, we need to display an outdated/unsupported browser alert:
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);
Don’t forget to add an empty
right after the opening <body>.
