JSFiddle - React, Tailwind, and code Playground

by James Peter

HTML

<header>
  <h1>Detectar versiones de IE/Edge</h1>
  <h2>Script Javascript para reconocer Internet Explorer hasta 12+ alias Edge.</h2>
</header>
<div class="view">
  <section>
    <h3 id="resultado">detectando…</h3>
    <p id="detalles">n/a</p>
  </section>
  <footer>
    <blockquote cite="https://stackoverflow.com/a/34883022">
    <code>var</code>&ensp;<code>uA = window.navigator.userAgent,</code><br />
 &emsp;&emsp;&emsp;<code>onlyIEorEdge = /msie\s|trident\/|edge\//i.test(uA) &amp;&amp; !!( document.uniqueID || window.MSInputMethodContext),</code><br />
 &emsp;&emsp;&emsp;<code>checkVersion = (onlyIEorEdge &amp;&amp; +(/(edge\/|rv:|msie\s)([\d.]+)/i.exec(uA)[2])) || NaN;</code>
    </blockquote>
  </footer>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Dancing+Script');

body {
  color: #555;
  background-color: #eee;
  font-weight: 300;
  margin: 0;
  padding: 1rem 3rem;
   -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
          display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: 'Dancing Script', cursive;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 100vh;
}

h1 {
  text-align: center;
  font-size: 3rem;
  line-height: 4rem;
}
h2{
  color: darkgrey;
  font-size: 1.8rem;
  text-align: center;
  font-size: 100;
}
h3 {
  color: white;
  text-align: center;
  font-weight: 300;
  font-size: 3rem;
}

p {
  text-align: center;
  font-family: "Fira Mono", monospace;
  font-size: 1rem;
  line-height: 1.5rem;
}

.view{
  background: #1b2836;
  color: color: #fff;
  min-height: 10rem;
  padding: 1rem;
  box-shadow: 15px 15px 3px rgba(0, 0, 0, 0.3);
  font-family: 'Open Sans', sans-serif;
  margin: 2rem auto 1.6rem;
  max-width: 100%;
}
#detalles{
  color: #8899a6;
}
blockquote{border-left:1em solid #555;margin:1.5em 1em;padding:.5em 1em;quotes:"\201C""\201D";}
       blockquote:before{color:#808080;content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;}
       blockquote :first-child{display:inline;}
       blockquote :last-child{margin-bottom:0;}

JavaScript

/******
        Detecting Windows Internet Explorer and Microsoft Edge More Effectively
    		
        @author: Pedro Macedo Minchán
        @thread: https://stackoverflow.com/a/34883022
        @inspired: https://codepen.io/gapcode/pen/vEJNZN
        @inspired: https://gist.github.com/jalbertbowden/5174156
        @date: 26-05-2017/UTC-05
        @update: 31/05/2017
        @ver: 0.8
        @URL: http://jsfiddle.net/Webnewbie/apa1nvu8/embedded/
        @test: IE[4-11] && Edge12+
        @Works on AllStandardMode and in CompatibilityMode <=IE11:
        var IE_lte_10 = ( !!document.all && +( /msie\s(\d+)/i.exec( window.navigator.userAgent )[1] ) ) || NaN; // No works in EdgeHTML Mode
        var IE_11 = ( !!window.MSInputMethodContext && "ActiveXObject" in window && +(/trident(?:.*rv:([\d.]+))?/i.exec( window.navigator.userAgent)[1] ) ) || NaN; // No works in EdgeHTML Mode
        var EDGE_gte_12 = ( !!window.MSInputMethodContext && !document.uniqueID && +(/Edge\/(\d+)/i.exec( window.navigator.userAgent)[1] ) ) || NaN;
        *******/

		//All Standards and Compatibility Mode
    var uA = window.navigator.userAgent,
        onlyIEorEdge = /msie\s|trident\/|edge\//i.test(uA) && !!( document.uniqueID || window.MSInputMethodContext),
        checkVersion = (onlyIEorEdge && +(/(edge\/|rv:|msie\s)([\d.]+)/i.exec(uA)[2])) || NaN,
        result = document.getElementById('resultado');

    document.getElementById('detalles').innerHTML = uA;

    result.innerHTML = !isNaN(checkVersion) ? 'You\'re using ' + (checkVersion >= 12 ? 'Microsoft Edge ' : 'Windows Internet Explorer ') + checkVersion : 'You\'re not using Microsoft\'s Browser.';