How can I create an @supports statement for whether custom CSS properties are supported or not?

Question

Basically, the title says it. By "custom CSS properties" I mean, for example --main-color: black;

Temani Afif · Answer

Simply like below. A random value assigned to a random custom property

@supports not (--foo: bar) {
  body {
    background: red;
  }
}

The body background will turn red if your browser doesn't support custom properties