CSS feature query - @supports

The @supports CSS at-rule lets you specify declarations that depend on a browser’s support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

Declaration Syntax

All of the following syntax are valid.

@supports (transform-origin: 5% 5%) {}

@supports not (transform-origin: 10em 10em 10em) {}

@supports not (not (transform-origin: 2px)) {}
@supports (display: grid) and (not (display: inline-grid)) {}

@supports (display: table-cell) and (display: list-item) {}

@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}

Find detailed info on this topic here – https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

CSS feature query – @supports

Declaration Syntax