Checking If CSS Property Supported in Current Browser with Javascript

javascript
Published on March 13, 2020

A CSS property-value pair can be checked for browser support in Javascript using the CSS.supports() method.

With newer CSS properties not available in all browsers, it is sometimes required to check whether a CSS property & its value are supported in the current browser. This can be detected in Javascript using the CSS.supports() method.

CSS.supports() takes 2 parameters — first is the CSS property, and second is the value of that property. Basically this method checks whether the browser supports the given CSS property and the given value of that property.

The method returns a true if the CSS property-value pair is supported, and false otherwise.

if(CSS.supports('text-decoration-thickness', '1%'))
	console.log('text-decoration-thickness is supported with percentage values');
else
	console.log('Not supported');
Related Tutorials
How to Check for a CSS Media Query Match in Javascript
How to Get Current Value of a CSS Property in Javascript
How to Get CSS Values of Pseudo Elements with Javascript
Comments
Loading Comments