Checking If CSS Property Supported in Current Browser with Javascript

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');