til/css/conditional-styling-for-unsupported-css-features.md

Conditional Styling For Unsupported CSS Features

As much as possible, you should aim to use CSS features that have broad browser support. Sometimes browsers lag behind or you'd like to take advantage of a draft feature in browsers that support it.

For these situations, you can provide conditional styling using the @supports at-rule.

Here is an example of conditionally using display: grid if it is supported:

@supports (display: grid) {
  div {
    display: grid;
  }
}

In this article there is an example of using background-blend-mode and falling back to background-image if it isn't supported.

@supports not (background-blend-mode: normal) {
  body {
    background-image: url(fallback.png); 
  }
}