[Turtle91]

Originally Posted by JSWolf

That's a very good suggestion.

Yeah, that would be nice....but.... all you need to do is put the non-supporting css first, then the @supports rule. If it supports then it takes priority since it is later in the css.

Here is the example from W3Schools:

/* use this CSS if the browser does not support display: grid */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}

/* use this CSS if the browser supports display: grid */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}