Check browser compatibility for a CSS property or an HTML element

In my previous article "CSS: Truncate overly long text with text-overflow", I found myself posting a screenshot of a reference site to check the compatibility of the text-overflow property, without actually discussing the site itself.

So today I'm setting things right by talking to you about https://caniuse.com

What is it?

"Can I use" is simply a site that provides, for every CSS property and every HTML element, the list of all compatible browser versions, with several possible levels of compatibility: full, partial, or unsupported.

Some JavaScript features are even included, but it's less useful since in JavaScript it's possible to transpile your code to make it compatible with older browsers, which isn't possible in CSS (at least not with the same rendering).

How does it work?

Just go to the site https://caniuse.com and use the search bar to find the element you're interested in, as in the example below:

The site will offer you a list of cards like the one below with all the necessary info for you to decide whether or not you still want to use the element or property in question.

At the top right, you can see the overall compatibility of the CSS property, which is 88.63%, which is good, but not enough if this property plays a critical role in the site's understanding or design.

For a critical property, I would recommend opting only for properties with a minimum of 98% compatibility, but there can be exceptions.

If you're building a special desktop application, for example using Electron, then you'll be running on the same engine as Chrome, so you'll be able to enable features that are only present in the latter, without any compatibility issues.

If you're not familiar with Electron, feel free to check out my article "Electron, or how to develop desktop applications in JavaScript"

By hovering over one of a browser's versions, you can get more information, such as the overall usage rate of that specific version or notes about the feature (need for a prefix, rendering issue, etc.)

I often see wonderful, revolutionary CSS properties going around on social media, but my first instinct is to check their compatibility on "Can I Use", and most of the time, it's Chrome-only.

You too, make it a habit to check caniuse.com!