Load files depending on browser or write workarounds within the file?

Question

I'm writing up this website running under IIS with .NET Core. I developed most of the site with minimal use of JS so that the server will be doing most of the work (and thankfully so because of the issue I'm having).

One of my functions calls the Javascript .includes() which is not supported on IE11. There are workarounds posted online, but I feel as I go along, there will be more and more functions that will break in IE11 (this includes CSS).

I do have a simple JS function that seems to be reliable enough to figure out which browser the user is on.

Would it be better to write the workarounds within the JS function (basically have if statements within the function that calls an IE11-specific function) OR send the browser variable back to the server and load a browser-specific JS/CSS file.

Answer 1

Generally spoken, use feature detection for the things you want to implement or use instead of browser detection, feature detection will work better and more general, because you check, if a browser is able to have feature x or not, so your code is not bound to any browser.

In this specific case I would recommend to you to use a polyfill for your required function: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/includes#Polyfill or https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/includes#Polyfill which makes your code work in browsers, which cannot handle includes() calls. You can add all polyfills to a separate file which then can only be loaded on demand but must be loaded before using the function which is polyfilled in a different file.