How to Target Internet Explorer Browsers in HTML and CSS

Website Development

Christopher Wray

I don't use Internet Explorer, and stats show that 97% of Internet users are done with Internet Explorer as well. The browser is outdated, slow and just painful for developers. For years developers have had to use special media queries for IE users and basically develop entirely different sites for the browser. Thankfully, those days are soon over.

At Soltech, I've decided not to build for Internet Explorer. We design and develop sites with CSS3 and Webflow, using features like flexbox and grid. IE does not render flex well, and doesn't render grid properly at all. Unfortunately for the small percentage of users that are still using IE, this can be a bummer. Especially since some IE users may not be as tech savvy as Google Chrome users who switched when they found how much faster Chrome is.

Recently, I decided to add a notification to all IE users on some of my websites to upgrade their browser. The notification shows only to Internet Explorer users and will even show to users that have the latest version of IE installed. When I was doing research on how to target IE users, it was a little difficult to find the syntax. It was easy to find the comment needed to target IE users of IE9 and below, but being able to target IE users of 10 and above was a challenge. (IE10+ still renders grid and flexbox terribly.

I finally figured out how to target IE 10 and above and I wanted to share with you guys the code. This could be used to change the way basically any element is displayed, but I just used it to show my notification bar. Potentially, you could target IE users with a simplified design of your site.

Here is how to to target IE users 9 and below:

  1. You must first either add a <style> tag to the head of your pages, or you can add the CSS to your CSS file.
<style></style>
  1. Secondly, add a comment to target IE users:
<!--[if IE]>
<![endif]-->
  1. After you have added the comment, add your special CSS rules inside the statement. Use regular CSS to change the styles of the elements you want to display differently. (I just set the browser element to display "block" as my normal CSS had set it to "none".
<!--[if IE]>
.upgrade-browser{ display:block;}
<![endif]-->

Your site will display as required on Internet Explorer users 9 and below as you specified, but what if you want users of IE 10 or 11 to see your content differently as well since those browsers don't display grid or flex well?

In order to do this, you must add a media query.

Here is how to target IE users 10 and 11:

  1. First you still need to add a <style> tag to the head of your HTML or update your CSS file.
<style></style>
  1. Secondly, add the below media query to your CSS.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}

Just to let you know, I found this hack on the internet somewhere, but I can't remember the site.

  1. Finally, as before, you can add your special rules inside the media query. Again, I just set the element I wanted to show display property to "block".
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.upgrade-browser{ display:block;}
}

Here is how the code in the head of my HTML looked like after I had added both of the targeting rules.

<style>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.upgrade-browser{ display:block;}
}
<!--[if IE]>
.upgrade-browser{ display:block;}
<![endif]-->
</style

Thanks so much for reading and I hope this can help you out! If you like my articles, Connect with me on LinkedIn, or follow our page on Medium.

Thanks so much for visiting our blog.

Do you want to know a secret?

Soltech is owned by me, Chris.

Right now, I am looking for a job.

Over the past couple of years, I have learned so much doing work for different small businesses both in Mexico and the United States.

It has been a huge blessing to work with many amazing people.

That being said, I want to hone in my craft in Software Development and Customer Service, which are two parts of my job here at Soltech that I have especially loved and want to grow in.

I am seeking a position where I could do one of those things more full time.

Are you hiring for one of those roles?

Find my contact info here and reach out if you are and interested in talking to me about joining your team.

Thanks so much for reading. I hope you enjoy the content here.

More For You

Send us an Email

We'd love to hear from you.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(