Browser Warning

Browser Warning.markdown

Browser Warning

Inherited a project that couldn't support IE and was slated for rebuild. Created a simple IE warning Component

A Pen by Jordan Cauley on CodePen.

License.

index.html

<div id="browser-warning" class="browser-warning browser-warning-container"> 
  <h4 class="browser-warning browser-warining-text">
    We're Sorry, This site doesn't support Internet Explorer Right Now. Please use <a href="https://www.google.com/chrome/browser/desktop/index.html" title="Use Chrome">Chrome</a>
  </h4>
</div>

script.js

function isIE() {
  
  var ua = window.navigator.userAgent,
      msie = ua.indexOf("MSIE "),
      alertBox = document.getElementById('browser-warning');
  
  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
    
    alertBox.className = 'browser-warning-container is-ie';
    
  }; 
};
isIE();

style.css

.browser-warning{
  color: #fff;
}
.browser-warning a{
  color: #fff
}
.browser-warning-container{
  display: none;
  width: 80%;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background: rgba(214, 63, 47, .7);
  border: 3px solid rgba(214, 63, 47, 1);
}
.browser-warning-container.is-ie{
  display: block;
}