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...
}