@support

Active CSS will work with the standard CSS @support statement for checking whether or not a browser supports a particular feature of CSS, and you can use @support both inside and outside of event declarations.

There is also an @else support control flow statement and support for the @else statement that allows you use conditionally utilise feature detection results.

Note that @support will only work in browsers that support the @support statement.

 

A good article on @support can be found here:

https://davidwalsh.name/css-supports

 

@support - outside event declarations, like CSS:

(Note that @else support and @else will not work using it this way, because when we code outside of the ACSS event selectors we are getting into native CSS support which doesn't support these statements.)

@support (display: flex) {
    ... do something
}

@media - inside event declarations:

button:click {
    @support (display: flex) {
        ... do something
    }
}

@support with @else support and @else:

button:click {
    @support (display: flex) {
        ... do something
    } @else support (display: grid) {
        ... do something
    } @else {
        ... do something
    }
}

@support