Compatibility

By now you probably realize that there's countless of ways to combine technologies, to make websites work. It's important to make sure that the browsers people actually use, don't encounter problems when loading your site.

Browser Compatibility

Each browser is built different, but you probably know that if you've used more than one, which is very likely.

The next logical question is - how many people use what browser, so that you can cater atleast to the majority of your potential viewerbase?

According to kinsta.com they state, that:

Browser Percentage Market Share
Google Chrome 77.03%
Safari 8.87%
Mozilla Firefox 7.69%
Microsoft Edge 5.83%
Internet Explorer 2.15%
Opera 2.43%
QQ 1.98%
Sogou Explorer 1.76%
Yandex 0.91%
Brave 0.05%

The folks at oberlo.com state, that:

Browser Percentage Market Share
Google Chrome 64.08%
Safari 19.40%
Samsung Internet 3.49%
Mozilla Firefox 3.34%
Microsoft Edge 3.18%
Opera 2.24%
UC Browser 1.39%
Internet Explorer 0.64%
Android 0.45%
Other 1.79%

So it's pretty obvious that measuring the entire internet to estimate desktop browser usage is pretty hard. Different approaches will give different results.

Nonetheless, you can atleast understand the general trend of usage.

Chrome is heavily popular, Safari coming in second, then Firefox, Microsoft browsers and the rest of lesser known ones. So if you pretty much cover the top 5:

  • Google Chrome
  • Safari
  • Firefox
  • Microsoft Edge
  • Internet Explorer

Then you should be good, atleast for a while.

CanIUse.com

caniuse.com is a very great website, made by Alexis Deveria and with contributions from the web dev community.

As they state on the "About" page:

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

To use it, you only have to search for the feature you want to make sure works on atleast the most popular browsers. You do so from the main page.

Try to search for "div".

caniuse

You should see something like the above. The div element obviously has support pretty much on any browser, because it's one of the most widely used elements. As you see, all of the browsers are either green or gray.

Green means fully supported, gray means that supprt is unknown currently.

Tip: The best way to test out your site across browsers, is to simply install all of them and do manual tests. This however takes a lot of time, so initially looking at sites like caniuse.com can save a lot of time.

Let's try something not as widely used, one of the more newer features - "CSS Grid":

caniuse2

Here we see some red, which means the feature is not supported. There's also indicators for partial support, the ones in yellowy-green.

If you scroll down the result page, you get a bunch of notes, issues, resources and you can test the feature on a live browser via their browserstack.com integration.

Summary

So as you see, when developing a website, it's important to note the top versions of the most popular browsers, whether they support the tech you will want to create with.

How about older browser versions?

I noticed a trend some time ago, that you should work extra hard to support ALL of the browser versions, even as far as IE 8, IE 9 and such.

No.

If anyone tries to sell you this, either make sure you get paid properly (it's going to suck spending time working on workarounds for old technologies) or just tell them that the latest browsers are the most secure and performant, and instead you should get the users to use proper software, not tools of antiquity.

doiuse.com

A very similiar tool, but only for CSS and it works the other way around - once you already have a site setup, you can check whether you have some exotic features that might break browsers.

iwanttouse.com

This one is for when you have a list of features and you'd like to see in advance if they will work, and how many browsers it will break.

Adding "CSS Grid" or as they've listed it "CSS Grid Layout (level 1)" to a site, will:

96.29% of all web users can use your site and 3.71% will not be able to use your site without polyfills

What's a polyfill?

As wordnik.com say:

A plugin that provides the functionality of newer browsers to older versions

Device Compatibility

What about mobile devices?

According to statista.com, as of January 2021, we had 4.32 billion users on mobile devices.

That's roughly the maximum you can lose out on if you choose to ignore things like performance, compatibility, responsive design and all of the other signs of proffessional work.

Similiarly to browsers, testing your site on physical mobile devices is the closest you can get, but it's time consuming. You can make it through with emulators, like the one in your browser dev tools and others, though.

It's also important not to "over-engineer" your projects, because you will be taking time away from actually developing great features and getting your site out there in the world.