How to Target Internet Explorer Browsers in HTML and CSS

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. If you use Webflow, you can clone the notification here. 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>
2. 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 I had set this element to display "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 as before. <style></style>

2. 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.