Cross-browser compatibility for web-applications

Web applications are getting bigger and smarter, and they are 24/7 accessible which is a reason why many companies use them for business. But, if you are a user of one, or you are a web developer, probably you have had problems with cross-browser compatibility (application performance and design is not the same in different browsers). Luckily, every problem has its solution, and we are ready to share our experience.

We will explain how to make a web app which is supported by different browsers and give you some useful advice.

How the browser works and what is in the root of the problem?

After you enter the address for search, the browser finds an IP address for your web app, sends a request, and accepts the response. The response will contain documents with JavaScript code, HTML and CSS. Browsers stores that file in an internal data structure and uses them for publishing a DOM, and manipulating and adding interactivity to it. JS engine runs JavaScript. Every browser has it`s own JS engine. For Microsoft Edge name of engine is Chakra, JavaScriptCore is for Safari, SpiderMonkey is for Firefox, V8 is for Chrome. The engine is build based on the standards of ECMAScript, which describes features of JavaScript. The different engine is the key to the problem with cross browsers support because they don’t support the same sets of features of JS, HTML, and CSS.

At the beginning of the internet, 1990 there were only 2 browsers – Netscape Navigator and Internet Explorer. They have different JS engines, so the rule was – use the right browser for your website. In 2000 ECMAScript and W3C standards are accepted. Multi-browser support was enabled (detection via user-agent sniffing). Today’s goal is cross-browser support. Javascript engine does JIT compiling and running code. Newer versions of the engine support new features by the ECMAScript standard. But old versions are not adapting, so if your users use an older browser, you will have to do some additional work. The solution is to adapt your code to work on different versions and types of browsers, and for that, you need information on which browser your app is running.

There are different strategies for handling incompatibilities between browsers; Let’s explore the most common ones.

  1. Feature detection – write code which asks browser something like – do you know for this feature? In case that browser does not know feature, code which explains that feature is written.
  2. Browser sniffing – from request you can read the user-agent name and depend on that send different code. This is not good practice, because the user can send you wrong information by changing user-agent info in settings of the browser.
  3. Polyfill – a piece of code which “explains” to the older browser how to assemble new functionalities of JS, CSS, and other technologies. Polyfills also consists of 3rd party JavaScript files that you can drop into your project, but they differ from libraries — whereas libraries tend to enhance existing functionality and make things easier, polyfills provide functionality that doesn’t exist at all.
  4. Polyfill – a piece of code which “explains” to the older browser how to assemble new functionalities of JS, CSS, and other technologies. Polyfills also consists of 3rd party JavaScript files that you can drop into your project, but they differ from libraries — whereas libraries tend to enhance existing functionality and make things easier, polyfills provide functionality that doesn’t exist at all.

For example, arrow functions, async functions, block-scoped functions, classes can be compiled, but, array buffer, array.from, array.of, map, nuber.isNaN or Promise must be polyfilled.It would be great if all users use the latest version of browsers and more great would be if all users use the same browser ( at least from the perspective of the programmer), but that is not reality. What we advise is to investigate libraries and features which you use and check browser support for them. Test after implementing each part of your app, so you can easily find which feature makes problem with your app. When you find a course, apply some of the above-mentioned methods and make your app works.