Testing for CSS support with vanilla JavaScript

In CSS, you can check if a feature is supported using the @supports() rule. For example, to check for FlexBox support, you’d do this:

@supports (display: flex) {
	div {
		display: flex;
	}
}

Fortunately, there’s a vanilla JavaScript way to check for support of CSS features too: CSS.supports().

You pass in the property name (ex. display) as the first argument, and the value (ex. flex) as the second.

if (CSS.supports('display', 'flex')) {
	// FlexBox is supported...
} else {
	// No FlexBox support...
}

This is useful if you want to write JavaScript enhancements/polyfills for CSS features when they’re not supported.

Browser Compatibility

This works in all modern browsers, but has no IE support (the same level of support as @supports() in CSS).

You should probably also check that CSS is supported first to avoid errors.

if ('CSS' in window && CSS.supports('display', 'flex')) {
	// FlexBox is supported...
} else {
	// No FlexBox support...
}