By Shreya Bose, Technical Content Writer at BrowserStack - December 20, 2022
However, errors in JS due to browser differences continue to plague developers. Though their occurrence is less frequent than before, they still need to be dealt with quickly and cohesively. This article will explore these issues and offer a few solutions for the same.
- Chrome (Above 106)
- Edge (107 and 108)
- Safari (15.6, 16.1, 16.2, 16.3, TP)
- Firefox (106, 107, 108, 109)
- Opera (92)
In case, you want to test your website compatibility on older browser versions, check this out. Any feature implemented with ES6 will essentially not work on this browser. A few examples of newer JS features unsupported on older browsers are:
- Promises are excellent for executing asynchronous operations, but they are not supported in IE.
- Arrow functions offer a more concise and usable syntax to craft anonymous functions. It is not supported on IE and Safari.
- On declaring Strict mode on top of JS code, it is parsed more rigorously with numerous rules, causing more warnings and errors to be flagged. Using Strict mode creates cleaner and more efficient code. But it isn’t supported uniformly across all browsers.
- With typed arrays, JS code can access and modify raw binary data. Along with modern browsers, this feature is only supported by IE10 and above. Did you know, how to test your website on the latest IE versions?
Browser sniffing is the practice of “sniffing” out which browser is accessing a site and running the relevant code to make the site compatible with that browser. This was done by reading the unique user-agent string of the browser and identifying it. At a time when every internet user was using either Netscape or IE, this worked perfectly fine.
However, with more recent browsers, this approach tends to be faulty. The code itself is error-prone, to start with. For example, let’s say a website feature doesn’t work on Chrome 86 and below, and browser sniffing code has been added to detect this. However, it does work on Chrome 87. But because the code doesn’t include Chrome 87, the feature won’t be loaded even though it is supported.
It’s a good practice to do periodic and recurring checks of your website on different versions of real Chrome browsers. In fact, to stay ahead of the game, check websites on multiple real browsers, especially the major players like Chrome, Safari, Firefox, and Edge. Browser sniffing code has to be regularly changed to stay relevant. Without such updates, browsers are prevented from accessing websites with features they actually support but whose code hasn’t been updated. At one point, the issue got so bad that browsers started allowing users to change their user-agent string to get around the sniffing code when queried with JS. This made browser sniffing even more pointless.
As mentioned earlier, libraries like jQuery are essential for abstracted browser-based differences related to JS code. However, there are native and third-party libraries that are not supported across browsers and browser versions. Before using a library, analyze its offerings in terms of browser and feature support. Check its development history to ensure that it is regularly updated to keep pace with technological advancements.
To verify JS browser compatibility quickly and accurately, try BrowserStack’s real device cloud of 3000+ real browsers and devices, Just sign up for free, select the real browser-device combination you want to test on, enter the website URL and start testing.
- Use Polyfills: These are third-party JS files that work similarly to JS libraries. However, polyfills are also capable of providing new functionalities. For example, a polyfill can be used to support ES6-based features in browsers that fundamentally don’t.