A compatible way to show users a browser warning

Question

There are countless questions about this but the answers to all of them are out of date with IE no longer supporting conditional statements, jQuery no longer supporting detection without a migrate plugin etc. This question has been asked before but there are no answers that remain supported in 2020.

The tag is a perfect example of how simple this should be. Surely there must be a way to detect the browser (IE) and then set a DIV with a warning message to visible.

There have been answers in the past but even they aren't supported now. Of course any JS used to detect the browser would need to be compatible with IE.

My first thought was to do something that would detect MSIE and then display a DIV. It seems up for debate as to if you should use feature or browser detection based on everything I've looked through for the last few hours.

The reason I need this message in IE is because the site isn't compatible due to new JS and CSS features. I wouldn't know where to start with this so apologies for not posting any code. All it needs is something like this.

// Detect if Internet Explorer
//   If no do nothing
// If Internet Explorer
//   Set iewarning to visible

.iewarning {
  display: none;
}

<div class="iewarning">Update your browser</div>

I don't know how to go about detecting features, the browser or user agent but this question has to be asked again now that there's no conditional statements or jQuery support. Pure JS is the most ideal solution. Any approaches using that would be appreciated. Thanks in advance.

EDIT If feature detection could be used to make a DIV visible.

if (typeof Promise == "undefined") {
  document.getElementByClass("iewarning").style.display = "block";
}

.iewarning {
  display: none;
}

<div class="iewarning">Please upgrade your browser</div>

That doesn't work though but seems like it could be a more minimal solution.

EDIT Using a query selector instead should work? I'm entirely lost but willing to use feature detection if someone can help me get it working.

if (typeof Promise == "undefined") {
  document.querySelector("div.iewarning").style.display = "block";
}

.iewarning {
  display: none;
}

<div class="iewarning">Please upgrade your browser</div>

Answer 1

OK based on your comments so far here is the most simplfied browser detection approach I could devise using a div in the HTML as you requested.

function isUnsupported (browser) {
    return (browser.name === "MSIE" || browser.name === "IE")
}
var isUnsupported = this.isUnsupported(this.get_browser());
// Uncomment to simulate being in an IE browser.
//var isUnsupported = true;

this.listen("load", window, function() {
  if (isUnsupported) {
    var warning = document.querySelector(".iewarning");
    warning.style.display = 'block';
  }
});
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('Error: unsupported browser!');
}
function get_browser() {
    var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if (/trident/i.test(M[1])) {
      tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
      return { name: 'IE', version: (tem[1] || '') };
    }
    if (M[1] === 'Chrome') {
      tem = ua.match(/\bOPR\/(\d+)/)
      if (tem != null) { return { name: 'Opera', version: tem[1] }; }
    }
    if (window.navigator.userAgent.indexOf("Edge") > -1) {
      tem = ua.match(/\Edge\/(\d+)/)
      if (tem != null) { return { name: 'Edge', version: tem[1] }; }      
    }
    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
    if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
    return {
      name: M[0],
      version: +M[1]
    };
}

.iewarning {
  display: none;
}

<div>Welcome to the Website</div>
<div class="iewarning">IE not supported. Please upgrade your browser.</div>

Answer 2

There are countless questions about this but the answers to all of them are out of date with IE no longer supporting conditional statements, jQuery no longer supporting detection without a migrate plugin etc.

They're not out of date, since those features are still no longer supported, and nothing new has arrived to replace them.

This question has been asked before but there are no answers that remain supported in 2020.

There's a reason for that.

The tag is a perfect example of how simple this should be. Surely there must be a way to detect the browser (IE) and then set a DIV with a warning message to visible.

There are ways, but they have varying degree of reliability, and none match what conditional comments provided.

There have been answers in the past but even they aren't supported now.

That's basically your answer right there.

Of course any JS used to detect the browser would need to be compatible with IE.

Would it? If it's not compatible, wouldn't that give you an indicator that the browser doesn't support the features you want to provide?

My first thought was to do something that would detect MSIE and then display a DIV. It seems up for debate as to if you should use feature or browser detection based on everything I've looked through for the last few hours.

Yes, read those debates. If you want to detect features, then detect features. If you actually want to detect browsers, then do so with the user agent.

The reason I need this message in IE is because the site isn't compatible due to new JS and CSS features.

What about other legacy browsers that don't support the features you want? Why do you only want to deal with one specific browser in this situation.

I wouldn't know where to start with this so apologies for not posting any code.

You already had a good start when you read the myriad of other discussions on this topic.

You seem unwilling to listen to any previous discussion and are hoping there's some magic that hasn't yet found its way to the internet.

There isn't.

Here's a summary of some options.

• IE's legacy features - If the specific versions of IE that you want to detect have conditional comments enabled, then use that feature.
• User agent sniffing - gives detailed information about the user agent. It can technically be spoofed by the user, but that's very rare, and who cares. If the user wants you to believe they're using a different browser, then let them.
• Feature detection - If missing features are your concern, then this would seem to be the obvious choice. However, if you load libraries that provide compatibility for some of the missing features, it could get a little complicated. As long as you're aware of the 3rd party code you load, it shouldn't be an issue.
• Let it break - Why not? Do you think your site is the only one they'll encounter that uses modern features? Most sites take this approach, and it works incredibly well.
• Ask the user - Kindly request upon entry that the user tell you their browser and version. Say things like "pretty please" and convince them that it's of the utmost importance (lie to them), and you may have some success.
• Write a virtual psychic library - This would harness the unseen powers of the universe to detect the exact browser and version of the visitor to your site. Seems like a winning solution to me.

You're not the first to want this, but you're sort of acting like this topic hasn't really been explored in full until today. It has. There's nothing new at the moment. When there is, it will be big news, and you'll see it discussed in those old posts.

Answer 3

I just wrote a codepen a couple of days ago that uses the approach codepen.io utilizes in production to notify a user when they come to their site with an IE browser. The notification is modal. It's pretty solid.

CSS:

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#unsupported-message :last-child {
    margin-bottom: 0px;
}
html, body {
    height: 100%;
    -webkit-overflow-scrolling: touch;
}
body {
    background: #131417;
}
/* @media all and (min-width:831px) */
body {
    position: relative;
    height: auto;
    min-height: 100vh;
}
body {
    color: white;
}
body {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
    background: #131417;
}
/* @media all and (min-width:831px) */
body:not(.sidebar-false) {
    padding-left: 188px;
}
html {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    line-height: 1.5;
    font-size: 15px;
    font-weight: 400;
}
html {
    overflow-x: hidden;
}

#unsupported-overlay,
#unsupported-modal {
    display: block;
    position: absolute;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #000;
    color: #D5D7DE;
}

#unsupported-overlay {
    top: 0;
    bottom: 0;
    opacity: 0.7;
}

#unsupported-modal {
    top: 80px;
    margin: auto;
    width: 90%;
    max-width: 520px;
    max-height: 90%;
    padding: 40px 20px;
    box-shadow: 0 10px 30px #000;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    border: solid 7px #ffdd40;
}

#unsupported-message :last-child { margin-bottom: 0; }

#unsupported-message h2 {
    font-family: 'Telefon', Sans-Serif;
    font-size: 34px;
    color: #FFF;
}

#unsupported-message h3 {
    font-size: 20px;
    color: #FFF;
}

body.hide-unsupport { padding-top: 24px; }
body.hide-unsupport #unsupported-message { visibility: hidden; }

#unsupported-banner {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #ffdd40;
    color: #000;
    font-size: 14px;
    padding: 2px 5px;
    line-height: 1.5;
    text-align: center;
    visibility: visible;
    z-index: 199;
}

#unsupported-banner a {
    color: #000;
    text-decoration: underline;
}

@media (max-width: 800px), (max-height: 500px) {
    #unsupported-message .modal p {
    /* font-size: 12px; */
    line-height: 1.2;
    margin-bottom: 1em;
    }

    #unsupported-modal {
    position: absolute;
    top: 20px;
    }
    #unsupported-message h1 { font-size: 22px; }
    body.hide-unsupport { padding-top: 0px; }
    #unsupported-banner { position: static; }
    #unsupported-banner strong,
    #unsupported-banner u { display: block; }
}

JS:

// dirty vanilla listen method
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('Error: unsupported browser!');
}
// dirty browser detection but production worthy
function get_browser() {
    var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if (/trident/i.test(M[1])) {
      tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
      return { name: 'IE', version: (tem[1] || '') };
    }
    if (M[1] === 'Chrome') {
      tem = ua.match(/\bOPR\/(\d+)/)
      if (tem != null) { return { name: 'Opera', version: tem[1] }; }
    }
    if (window.navigator.userAgent.indexOf("Edge") > -1) {
      tem = ua.match(/\Edge\/(\d+)/)
      if (tem != null) { return { name: 'Edge', version: tem[1] }; }      
    }
    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
    if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
    return {
      name: M[0],
      version: +M[1]
    };
}

function isUnsupported (browser) {
    return (browser.name === "MSIE" || browser.name === "IE")
}

var isUnsupported = this.isUnsupported(this.get_browser());

/* 
  Uncomment the below line of code to simulate
  being in an IE browser.
*/
//var isUnsupported = true;

if (isUnsupported) {
    this.listen("load", window, function() {
        var d1 = document.createElement('div');
        var a1 = document.createElement('a');
        var d2 = document.createElement('div');
        var title = document.createElement('h2');
        var p1 = document.createElement('p');
        d1.id = 'unsupported-message';
        a1.id = 'unsupported-overlay';
        a1.href = '#unsupported-modal';
        d2.id = 'unsupported-modal';
        d2.role = 'alertdialog';
        d2['aria-labelledby'] = 'unsupported-title';
        title.id = 'unsupported-title';
        title.innerHTML = '⚠ Unsupported Browser ⚠';
        d2.appendChild(title);
        d2.innerHTML += "This site does not support Internet Explorer. We generally only support the recent versions of major browsers like Chrome, Firefox, Safari, and Edge."
        d2.appendChild(p1)
        d1.appendChild(a1);
        d1.appendChild(d2)
        document.body.appendChild(d1);
    });
} else {
  var instructions = document.createElement('div')
  instructions.innerHTML = "Uncomment line 45 (//var isUnsupported = true;) in the javascript to simulate being in an unsupported browser."
  document.body.append(instructions)
}