Adding an "Update Browser" Banner for Legacy Browsers

Every day Internet Explorer gets older and users are (slowly) migrating away to more modern browsers. As IE's marketshare decreases, it makes more and more sense to drop IE support and spend that time you would've spend bug-fixing other things like accessibility! But, if you don't optimize your site for IE, the experience will be subpar, which could lead your users to navigate away from your site thinking it is broken for everyone.

Oh how I wish there was a way to solve this problem!!

Hold on a second, I'm getting a call...

*answers the phone*

Smart Person: Hey, I heard you were monologuing about how IE looking bad could reflect badly on your site's reputation. I just wanted to tell you, this problem has been solved...

Me: Oh, sure it has 🙄. The solution is probably complex and takes hours or days to implement, right?

SP: Nah, it's like, 8 lines of CSS.

Me: Yeah sure, but how much JavaScript do I have to load?

SP: None. Literally none.

Me: Hmm, sounds too good to be true, but I'd love to try it out, can you send it over?

*fax machine starts up*

*code prints out*

/* Hide IE banner by default */
.ie-notice {
  display: none;
}

/* Show IE banner on IE10/11 */
@media screen and (-ms-high-contrast: active),
       screen and (-ms-high-contrast: none) {
  .ie-notice {
    display: block;
  }
}

Okay, all joking aside, this solution really does work. The @media query that we're using here is taken from the Media Query section on BrowserHacks.com, and can be adjusted to work for any browser that has a trait that can be feature detected with media queries.

Side note: If you're not familiar with feature detection, it's worth learning about! Here are some articles here on Dev.to to help you out: https://dev.to/search?q=feature%20detection

One more thing

There's an awesome site called OutdatedBrowser.com that you can link to from your compatibility banner to help your users download a modern browser.

Here's an example of some content you could use for your banner:

<div class="ie-notice">
  <div class="container">
    <p>
      Your web browser is out of date. Update your browser for more security,
      speed and the best experience on this site.
    </p>
    <a class="button" href="http://outdatedbrowser.com">Update your browser</a>
  </div>
</div>

I work for an awesome company called Good Work. We are an expert team of web developers helping design teams at agencies, brands and startups build things for web and mobile.

If you're looking for someone to help out on Gatsby, Vue, Tailwind, or other projects, don't hesitate to reach out!