Skip to main content Accessibility Feedback

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

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips