-1

My logic is to hide the React content in root if the browser is Edge/IE and show the unsupportedBrowser content to let the user know that this browser is not supported.

Note this only doesn't work properly in IE. Works fine in Edge.

<html>
  <body>
    <div id="root">React Content</div>
    <div id="unsupportedBrowser" style="display: none;">
       Internet Explorer & Microsoft Edge is NOT supported.
    </div>


    <script type="text/javascript" defer>
       document.addEventListener("DOMContentLoaded", function(){
        if (window.document.documentMode || window.navigator.userAgent.indexOf("Edge") > -1) {
             alert("Edge browser");
             document.getElementById("root").style.display = "none";
             document.getElementById("unsupportedBrowser").classList.add("unsupported");
             // do other things
        };
      });
    </script>
  </body>
</html>
// CSS
.unsupported {
    display: block !important;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 45vh; 
}
Simon Wong
  • 236
  • 1
  • 2
  • 13
  • Define doesn't work properly? I justed it in IE and it renders as you expect (ie11= `Internet Explorer & Microsoft Edge is NOT supported.`) (ff79=`React Content`) – Rudu Aug 28 '20 at 23:09
  • In IE 11, `root` is still displayed and `unsupportedBrowser` is still displayed: none – Simon Wong Aug 28 '20 at 23:13

1 Answers1

1

Silly me! I forget in React, the stylesheet is declared in index.js which doesn't run in IE. I just had to import it in the HTML header.

Simon Wong
  • 236
  • 1
  • 2
  • 13