Browser Compatibility

by Dakota Larson

As part of my Internship here at Sundog, I have had the opportunity to do a fair amount of research into web development to better understand some of the best practices that are used. One of the topics that is of consistent importance to web developers is browser compatibility.

What is it?

Browser compatibility means that a webpage looks and functions the same regardless of which browser they are using. This is most commonly attributed to styling with CSS but also applies to JavaScript, and to a lesser extent, even HTML.

How can usable features be determined?

Luckily, features can be explored on Can I Use, a popular and frequently updated website that contains a large set of the latest web development technologies. Additionally, there is also a plethora of information about the different browsers that are available for use for both mobile and desktop.

How about some examples?

#1: Let’s say you have a styling dilemma where the only way to get your page elements to line up correctly is to use the CSS Calc() function, or JavaScript. Since the Calc() function has better performance, you want to use that, but aren’t sure if all browsers will support this CSS3 feature. After checking here, you can see the feature is supported across all major browsers, both desktop and mobile, so you decide to include it in your application.

#2: Let’s say you want to take a big leap and replace Bootstrap with CSS Grid after reading an article about the various benefits. So, you check here and much to your dismay, you see that the feature is lacking in support, especially with mobile browsers (at least at the time of writing). Therefore, you decide to keep Bootstrap as a dependency… at least for now. (Yes, Flexbox is a viable alternative, but the point of the example is to show that the latest technologies shouldn’t always be used to maintain high browser compatibility.)

How accurate are these statistics?

Ultimately, that depends. Every website attracts a different set of users, and those users may have different browser usage statistics than the set of all browser users. The solution to this problem is to run analytics to see who really is visiting your website and act according to that data alongside general data that is available to everyone.

What is going on here?

There is an interesting phenomenon where some older browsers, specifically IE 8, FF 52, Chrome 49 and Opera 36 have higher usage statistics than other browsers that are also considered out of date. The reasoning for this is Windows operating system browser support. IE 9, FF 53, Chrome 50 and Opera 37 all dropped support for Windows XP and Vista. Therefore, any user of that operating system can only upgrade their browser to an outdated browser version, creating this unusual spike in browser usage. This is where analytics can be very important. If a website isn’t getting traffic from these browsers, then there is less of a need to develop support for these browsers (however some would argue the need never goes away). Interestingly, even websites such as w3schools have a not insignificant amount of traffic from these legacy browsers so it is most likely better to err on the side of caution when it comes to browser compatibility. Luckily the number of people using legacy operating systems and browsers has been declining, however, it has been doing so at a logarithmic rate, so the rate of decline has also been declining over the years.

Browser compatibility has always been a challenge to maintain when attempting to integrate the latest web technologies. As with many things in life, finding a balance is key. Luckily doing so accurately with the help of analytics tools is possible and something that every web developer should develop an understanding for.