Checking support for new CSS properties

As browsers rely on different layout engines to render CSS, different browsers will display the same CSS code differently. In addition, new CSS standards are called 'modules'. Each layout engine has its own development path for the module which means that at various times it may be considered, approved or only partially developed.

An excellent resource to determine which browsers support a particular property is caniuse.com. With Caniuse, you can enter a property, and immediately see which how its supported by different browsers.

For example, suppose you wanted to create interesting shapes using the new clip-path property. To determine how much support there is for the new clip-path property, you can use caniuse.com.

Here is a direct link to the results page, which is shown in an image below.

Can I use - clip-path

Below is the legend:

Caniuse - legend

By mousing over a box you can see a popup which provides additional information. For example, you can learn that Chrome and Safari support the mask-image and mask-box-image properties, but not for other parts of the spec.

Some browsers and layout engines have their own status pages where you can see exactly what the status of a particular property is. This is particularly useful for unsupported properties, and allows you to see whether support is being considered or planned. For example, by checking Microsoft Edge's status page, it appears that there is no formal consideration being given to the possibility of implement clip-path.

For even more information, you can visit the following pages for detailed information about the status and plans for particular browsers or engines:

Chrome: https://www.chromestatus.com/features

Mozilla: https://platform-status.mozilla.org/

Microsoft Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

Webkit: https://webkit.org/status/

You can also quickly see changes to these statuses here: https://platformstatus.io/

 

Other Resources:

An alternative to caniuse.com - Quirksmode

An alternative chart from W3Schools.

Javascript ES6 compatibility chart - http://kangax.github.io/compat-table/es6/