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.

• MetaFight: If you're willing to take on the upfront cost of setting it up, you could use babel to write the JS you like and then have it transpiled to a more generally compatible version of JS.
• Paul_LayLow: @MetaFight I'm kinda new to this, didn't even know this was an option so definitely will look into it! I also saw one for CSS called modernizr which hopefully will smooth things out.
• MetaFight: I'm still pretty new to the web world myself. It can be a bit.... chaotic. But at least the problem of browser compatibility is largely solved. I've never heard of modernizr. I'll check it out :)
• Laiv: #3 do what many JS devs have done after too many headaches with IE, drop the support for IE11. Segmenting the code to make your app to run on conflictive browsers, will lead you to "boilerplate code" and "walkarounds" whether you like it or not. It goes for worse when you strive to make it backwards compatible with early versions.
• Paul_LayLow: @Laiv, thankfully IE11 is at most what we are testing for version-wise and was told just make it usable.

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.

• Paul_LayLow: Is there a similar rule of thumb for CSS? The only reason I considered the server-side detection so that CSS will also get dynamically imported in. But JS-wise, I will implement polyfill instead, thanks!
• Александр Фишер: @Paul_LayLow Somehow yes. For CSS you can use most of the time prefixed properties if a browser has not yet implemented the standard feature, but a polyfill way is not available. If a feature is not working in your browser, you have to use a JavaScript-based solution instead most of the time. You already mentioned modernizr, which is a very good start for it: modernizr.com - check out how this works, it will help you a lot :)