How to handle IE in a modern app without punishing your users.

Most of the world has declared IE dead and buried. However often it is still a requirement when dealing with large corporations and government. As much as the reasoning behind keeping the worlds worst browser operational could be argued it's not going to be covered here.

Modern browsers support cleaner code, better features and are far safer and faster. However the common answer to supporting legacy browsers is to throw your code through a converter like Babel. Don't get me wrong this is a solution and works for many situations but the result is more code, and code that is catered to the lowest common denominator. There are also several issues with this as it only seems to cover language features not browser APIs.

What might be a great alternative to this is targeting missing APIs and use a polyfill service. The reasons this works is that the browsers that need it are the only ones impacted over a small amount of extra code and one if condition.

The following example adds in the polyfil for html template.

<script>
    this.HTMLTemplateElement || document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=HTMLTemplateElement"><\x2fscript>');
</script>

You can do this for any polyfill that you need. Checkout https://polyfill.io/v3/ for more details.

I am aware that you can deferentially serve content, and that might be an even more ideal solution in many cases, but if that is not an option this is an alternative to serving up a lowest common denominator build.

Please let me know your thoughts and other tips in the comments below.

Photo by Hasan Albari from Pexels