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;
}
}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');Copied to clipboard!
Resources:
Remove ads
Want to get weekly updates to your mailbox? 📬
📚 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
