CoverT 28: CSS @supports

codeInteractive Code Example

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

Example

<div class="my-test">Hello</div>
@supports (display: flex) {
  .my-test {
    color: red;
  }
}

@supports (display: i-made-this-up) {
  .my-test {
    text-decoration: underline;
  }
}

Result

Hello