CSS Supports Directives

Feature detection using Modernizr is a client-side best practice. Still, you can also use the CSS @supports rule, which is a conditional group rule that can test whether the browser supports features and if not can degrade gracefully.

The code example below, checks if the browser supports 'flexbox'. If it is then the page body background colour will be red.

Code to change the background colour.

In the code example, we change the body background colour to red if flexbox is supported.

It's a simple example but not very useful, in the following case below, we want to inform the user that their browser does not support a feature that we are using by displaying a div if 'flex' is not supported.

So what we do is hide the div if 'flex' is supported. If 'flex' is not supported, then the div will be displayed.

@supports ( display: flexbox ) {
  body { background-color:red }
}

Flexbox-not-supported code.

Another way to display the div is to use the 'not' keyword, as shown below.

Here we hide the div, but if 'flex' is not supported, we then show the div on the page.

@supports (display: flex) {
    #flexbox-not-supported {
        display:none;
    }
}

Flex Supported.

#flexbox-not-supported {
    display: none;
}
@supports not (display: flex) {
    #flexbox-not-supported {
        display:block;
        visibility:visible;
    }
}
Summary.

This short blog shows you have you can use the @supports feature of CSS, I hope you found it helpful.