Do I need to worry about Internet Explorer in 2017?

Internet Explorer may be a thing of the past with Microsoft moving its efforts to Edge but IE still has left a 'legacy' behind, which begs the question, Do I need to worry about Internet Explorer in 2017?.

**TL;DR — **Whether you need to worry about IE depends on your specific requirements. Check your site's analytics and see if it is worth the time and effort. If you do need to support, IE on your site then there are some great tools available to get a consistent look without too many significant changes.

“Should I add support for IE in my website?”

How many people still use IE?

The days of supporting IE are numbered but there are still people who use Internet Explorer. If you are asking the question, Should I add support for IE in my website?, the answer may not be as easy as you think. Looking at global browser usage statistics or simply ignoring the problem entirely isn't the way to go.

Global browser statistics show some of the story:

1. Google Chrome reigns supreme with approximately 53% of the market share
2. Safari is a not so close second coming in at approximately 14% of market share. (http://gs.statcounter.com/, April 2017).

If I support Chrome and Safari I have nothing to worry about right?

Not quite. The third browser in the list is a browser I didn't even know existed, it's not Mozilla Firefox (approx. 6% in April 2017) but a cross-platform browser called UC Browser. This is a browser which is almost exclusively used in China and India. This highlights where the global browser usage stats flaws become apparent. If you are developing a single website which targets users all over the world then these statistics are a helpful gauge but more than likely, you are making a website for a specific target audience. In many cases, your own country or your own language group. In my case , I would target users in New Zealand but have the added benefit of being accessible to anyone who speaks English which broadens the appeal to countries including Australia, Great Britain and United States. Focus on a specific target audience and research the usage based on that audience. Your target audience should inform your decision.

Browser usage in New Zealand

When looking at browser support in New Zealand, there a few key differences when compared with global statistics.

1. **Google Chrome **still comes up on top (approx. 59%)
2. **Microsoft Internet Explorer **(approx. 18%)
3. Mozilla Firefox (approx. 12%)

(https://www.netmarketshare.com/browser-market-share.aspx?qprid=1&qpcustomb=0&qpcustomd=nz, April 2017).

Developing a website for a New Zealand audience can be very different to developing websites for other parts of the world. If you already have a website and are looking to give it an overhaul, the best tool at your disposal is analytics. If you have analytics set up on your site (you really should), you can gain insight into who uses your site and what browser they use. This could give you the basis of your support. If you find that there is a high percentage of IE users then perhaps you should consider making sure your website caters to that audience. A high bounce rate for a specific browser could mean that your website is not properly optimised for their browser and people have left your site immediately. Some of the most common issues are CSS incompatibilities, fortunately there are some easy to make changes which will make a huge impact to your site and ultimately the end-user's experience.

How do I optimise my CSS for IE?

If you've only just started web development in the last few years then you may have ignored older browser support. It is easy to develop on a single machine with a couple of modern browsers and your site looks great. This can lead to a false sense of compatibility. If you need to support IE, there are some simple tools you can use to ensure compatibility.

Here is what Medium looks like to an Internet Explorer 9 user:

Here is what Medium looks like to an Internet Explorer 8 user:

The screenshot from Internet Explorer 8 of Medium may not be entirely accurate, I suspect it is having trouble loading the fonts quickly, but it does give some insight into how a user will experience your site.

Wrangling CSS

Visual differences are the easiest to spot between different browsers and can lead to a lot of headaches. Internet Explorer can render your site very differently depending on the complexity of your stylesheets. Fortunately, these problems have been solved by some very smart people, here are some of the tools I recommend for wrangling your CSS and getting your site to play nicely with IE.

Autoprefixer

This invaluable postprocessor which writes vendor prefixes for you. Instead of reading through all the possible browser specific prefixes, you can use standard CSS and let Autoprefixer do the dirty work for you. Autoprefixer is useful for modern browsers as well as a version of IE. It takes the monotony out of updating styles, making them easier to maintain over time.

Autoprefixer transforms the following:

div {
  display: flex;
}

Into a much more compatible style:

div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

You can start using Autoprefixer in a variety of ways:

• Add Autoprefixer to your build PostCSS build
• Use Autoprefixer with your Sublime
• Use Autoprefixer for VSCode
• Choose the level of support you need for your site with browserlist

Normalize

Normalize.css has been around for a while but is still as relevant as ever. I use it as a base for most projects because it creates a level playing field and a great foundation for your site's CSS. Browsers have their own styling for HTML elements which can create the inconsistencies we see between browsers. Normalize resets these styles so we can be sure that the CSS we write will be more predictable. Check out the normalize.css project page for the older version which is compatible with IE6 (if you are unlucky enough to have to support IE6).

Testing

The most important thing to do during the development process is to test often. Chances are, you don't have an old Windows XP PC laying around but you could setup a virtual machine and begin testing. There are also some great services available for broader coverage and no setup like BrowserStack. The tools I have mentioned give the added benefit of improving CSS compatibility between most browser rendering engines used today; increased coverage could help improve the reach of your site.

Conclusion

This is by no means an exhaustive list, but it is a start on the road to browser cross-compatibility. I haven't touched on some more advanced methods like feature detection and the issue of JavaScript; that is a whole different story. Identifying the need for compatibility is the key and making some simple adjustments can go a long way. As Internet Explorer slowly dies, we can look to the future and simplify our compatibility concerns, in the meantime I hope that these tips will help you out.

Header image by Jorgen Kesseler. (June 26, 2010). Internet Explorer, a web developers menace. Taken from https://www.flickr.com/photos/verpletterend/5393470920,- (CC BY-SA 2.0)