Ahh… Internet Explorer.

Note: Whenever I mention IE in this article, I’m referring to IE11, the last IE version. It’s not as shabby as most people think. It’s also pretty similar to Edge. So when I say IE, I mostly mean IE11+Edge (I know Edge is better than IE, but some problems with legacy still exist.)

Who does not love IE? haha

i.e. The Chrome installer.

If you want to skip the whole rant, and you also believe that IE should be supported, and want to just go to the tips, click here. Otherwise, proceed.

There’s a debate on whether IE should be supported or not. When a WordPress site is built, should it also be tested on IE?

A surprising number of people say “no.”

That’s… pardon my French, but c’est stupide et non professionnel. (actual French from Google translate)

Now, for the record, I HATE HATE HATE Internet Explorer. And Outlook 2007. I hate them sooooooo much. I hate them.
However, for the time being they are a necessary evil that I have to deal with.

Because I am a professional web designer/developer.
Meaning, I get paid to do this. For clients. In the real world.

People seem to forget that part.

So, if you consider yourself a part of the creative industry,
and you get paid with other people’s money
to make them something that they need,
and they place their trust in you
by paying you their hard earned money,

then you need to understand this:

It’s not about claiming (lazy and pompous) excuses to suit yourself. It’s about delivering the best possible product to your client.

I don’t understand how this is even debatable.

Here, have a look:

Source: http://gs.statcounter.com/browser-market-share/desktop/united-states-of-america

That’s in the US. Here in Australia, IE has one less percentage point.

Slightly less than that worldwide (11%):

Source: http://gs.statcounter.com/browser-market-share/desktop/worldwide

Notice that IE is higher than Safari.

Also, remember that IE is a desktop application, so we need to look only at the desktop market share.

Arguing that you don’t “support” IE is just naive and frankly, unprofessional.

Here’s an example:
You go to an expo. It’s located in an English speaking country, but every/anyone is welcome. So there are some translators there. Like Spanish, Chinese, and French. No German translators though. Who likes the Germans? Eww.

So you turn away 15% of the visitors because of that.

Really?

(disclaimer: I have many German friends, I like German cars, writing tools, and beer. This is just an example.)

Is that the kind of service you want to offer your clients? Seriously?

The most common analysis of IE users is that they’re either old, or are stuck because of enterprise software.

Being old and being used to their ways is something that is very hard to change. We should be happy that they even use the internet. Have you tried explaining anything new and improved concerning technology to your parents? Oh, they always click the blue E? And they’re lost without it? Well did you explain? But they’re still like that? Well then you can’t change that now can you?

It took my parents over a year to install their first app on a Samsung Galaxy, and although I did get them to use Chrome, they still don’t want to use an iPhone (so they can easily FaceTime their granddaughter, and see photos on iCloud) because they’re “used to” the Galaxy (of which they don’t even use any apps). But they still love the iPad I bought them. Go figure.

Next, enterprise. Stuff like Active X, or ERPs that only work in IE. It’s not their fault.

I hope this makes sense. It’s not their fault that they are using IE. However, it IS your fault if they come check out the page, and the page isn’t working properly. It is totally YOUR fault.

This is not a “the customer is always right” issue. I don’t believe the customer is always right. (They’re wrong most of the time.)

I think this is an “at least let the customer through the door” issue.

That’s why I think that unless there are technical limitations, accommodating a significant proportion of the population is an approach that should go without saying.

Here are some commonly uttered strings of words about IE that I disagree with.

IE is dead. It’s not even supported.
– Just because MS doesn’t support it anymore doesn’t mean everyone in the world got the memo. If it’s being used, it’s not dead.

We do not support old browsers.
– That’s funny. I bet you don’t code everything in the newest unsupported languages either. Keep your designs and build cutting edge and clever, and don’t hide behind naive pretentiousness. (Did you make sure Safari displays letter spacing properly through the Divi builder’s settings?)

IE usage is less than x% so no.
– IE still has about as many users as Firefox and/or Safari. The only reason why you “support” FF & Safari is because they’re a webkit-based browser and the sites don’t break as easily on FF or Safari as it does on IE. If it were REALLY about the stats, IE should be there. Right behind Chrome. Next to the other browsers that all have about 10% usages. If you include Edge, MS browsers get a little more than 15%.

I support only web standards.
– You can still code to web standards, and make a page look good in IE. That’s just a lazy response.

I just don’t care.
– Well then it would be hard for a client to care about you and your work either… no?

Only old people use IE.
– Maybe true in some cases. But unless it’s GitHub or StackOverflow you can bet IE users are gonna visit. And guess what, Git and Stack renders fine on IE.

Educated users use *insert webkit browser*.
– I can’t even.. Even most university websites support IE. That’s just discriminatory and naive.

IE is just holding us back.
– Very true, but how does that justify not supporting IE? Would a client be willing to give up 15% of their users for your “preference” (or ignorance) of browser?

I can’t use ____ feature on IE.
– Then don’t. Find a way around it. Find a fallback. Find something that will make it work. It’s not an excuse.

Unless IE falls under 3% on desktop (so close to Opera numbers(1-2%), sorry Opera) I think it should be supported. Yeah, I hate it too, but there’s no other way at the moment is there?

So, enough complaining.

Now for some tips.

If I have convinced you in any way to at least give IE a look before you handover the website, then here are some easy tips for minimizing the IE problems.

The bad news

Unfortunately, no CSS variables.
I love using variables. But IE does not support CSS variables. That’s why I use SCSS. So, yeah, no native CSS variables.

No CSS grid.
Oh boy, this is really sad. CSS grid is very limited in IE11. So, unless it’s on mobile layouts, CSS grid is not a good idea yet. (and by yet, I don’t mean, “until IE supports it,” I mean “until IE usage drops significantly.”) See below on how to use conditionals for separate stylesheets. You’re gonna have to do something like that for CSS grid.

No CSS image blending.
Using cool CSS image blends like “background-blend-mode: multiply;” do not work in IE. Gotta photoshop those guys. At least we can use rgba colors. So there’s that.

The good news

SVG is supported. So that’s pretty surprising and awesome.
If it’s not working properly, try adding this to the header.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Flexbox works!!!
My favorite display method, flexbox, works.
Just make sure you add the extra rule with -ms in front, like this:

.flex {
  display: flex; /* for regular browsers */
  display: -ms-flexbox; /* for stupid browsers */
}

For more on this, check : https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx

You can use conditionals and load a slightly different (additional) stylesheet for IE users.
Add something like this in the header, and you can load a separate stylesheet to compensate for the dumbness that is IE. Make sure you check the paths and stuff before you just copy paste the snippet.

<!--[if IE]>
  <link href="/wp-content/themes/sometheme/css/forie.css" />
<![endif]-->

For more on this, check: http://www.webdevout.net/css-hacks/

Again, I hate Internet Explorer, and Outlook 2007. They waste my time, and they both suck. They should have been gone years ago. However, I feel that we should at least acknowledge their existence and at least check on those stupid programs before we call it a day.

I don’t know much about IE, and I haven’t owned a Windows computer in over 15 years, so I really can’t help you much on optimizing for the stupid browser. This post and some Googling is basically all I know. If you know any more tips, please share.

Edit Update:

This media query targets just IE 10, and 11.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

 }

 
[sc name=”learn css”]
 
[sc name=”responsive-ad”]
 
[sc name=”podcast”]
 
 

Photo by Cody Davis on Unsplash
Also https://www.pexels.com/photo/architecture-buildings-center-clinic-263399/ and https://www.pexels.com/photo/business-calligraphy-close-up-composition-261719/