Adding an "Update Browser" Banner for Legacy Browsers
Tags: browsers, compatibility, ie, internetexplorer
Published: 2019-11-19 20:29:29

---
title: Adding an "Update Browser" Banner for Legacy Browsers
published: true
description: Many websites are moving away from supporting IE, but instead of delivering a poor experience with no banner, it makes sense to help push your users towards a better browser.
tags: browsers, compatibility, IE, Internet Explorer
---

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\**

```css

/* 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](http://browserhacks.com/#hack-6615a4a5434dc55fc1c01736edb32cb7) 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](http://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:


```html
<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](https://simplygoodwork.com/contact)!