Internet Explorer 11 and below not supported warning via Javascript and CSS only

Post Photo
Saturday, 19th September 2020

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.

The 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);
}

The entire HTML within your body tag will be replaced.

..and some CSS

/**
* IE Warning
*/

.ie-warning {
    text-align: center;
    background: #ED2939;
    color:#fff;
    padding: 40px 40px 20px 40px;    
}

That's all you need!

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!

Share Post

If you like this post please share with your friends