πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Check For Support in CSS?

How to Check For Support in CSS?

Ferenc Almasi β€’ 2020 August 13 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

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

Copied to clipboard!
// Use the @supports CSS at-rule for feature queries

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

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

Copied to clipboard! Playground
// 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
How to Check For Support in CSS?
If you would like to see more Webtips, follow @flowforfrank

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

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.