How to Check For Support in CSS?

You can use the @supports CSS rule to check whether a CSS feature is supported:

// Use the @supports CSS at-rule for feature queries

@supports (mix-blend-mode: overlay) {
    .blending {
        mix-blend-mode: overlay;
    }
}
support.css
Copied to clipboard!

If you need to depend on supporting functionality in JavaScript, you can also achieve the same thing using the built-in CSS API:

// The method accepts two parameters:
// • the CSS property to check
// • the value of the CSS property
// it will return either true or false, based on whether the feature is supported
CSS.supports('mix-blend-mode', 'overlay');
support.js
Copied to clipboard!
How to Check For Support in CSS?
If you would like to see more Webtips, follow @flowforfrank

Resources:

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.