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?”
Photo taken from https://stocksnap.io/photo/3HGXPSXH2B

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:

Internet Explorer 9 rendering Medium (from https://netrenderer.com/, June2017)

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

Internet Explorer 8 rendering Medium (from https://netrenderer.com/, June2017)

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:

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)


Originally posted on Medium on June 18, 2017.