Internet Explorer 11 and below not supported warning via Javascript and CSS only
Reading time: 0,4 min
Just a few lines of Vanilla Javascript code and some CSS and you are ready to go. A nice warning will be displayed every time a user tries to visit your website using Internet Explorer 11 and below
The result looks like this
The trick is not to insert any permanent code in your HTML just to detect IE.
Hot Tip
Place your Javascript code in a separate file like check_ie.js.
If your main js file contains any Javascript ES6 IE's Javascript engine crashes and nothing will be executed!
Have fun!
// Javascript Part
/**
* Block IE 11 or Earlier
*/
if(isIE()) {
document.body.innerHTML = "<div class='ie-warning'><h1>This browser is no longer supported</h1><p>Please switch to a supported browser.</p></div>";
}
/**
* Detect IE 11 or Earlier
*/
function isIE() {
const ua = window.navigator.userAgent; //Check the userAgent property of the window.navigator object
const msie = ua.indexOf('MSIE '); // IE 10 or older
const trident = ua.indexOf('Trident/'); //IE 11
return (msie > 0 || trident > 0);
}
// Some CSS
/**
* IE Warning
*/
.ie-warning {
text-align: center;
background: #ED2939;
color:#fff;
padding: 40px 40px 20px 40px;
}
