Support for fallback values

[layershifter]

If a browser doesn’t recognize a property or its corresponding value, the browser will ignore the property altogether. When this happens, the browser uses (or falls back) to the previous value it finds.

This is the easiest way to provide a fallback. Here’s an example:

.layout {
  display: block;
  display: grid;
}

In this example, browsers that support CSS Grid will use display: grid. Browser doesn’t support CSS Grid will fall back to display: block.

https://zellwk.com/blog/older-browsers-css/

---

As we use objects to declare styles we can't simply do:

// ⚠️ this is not real code, this does not work
makeStyles({
  root: {
    color: "red",
    color: "rgba(0, 0, 0, 0.5)"
  }
});

We can use the similar approach as fela-plugin-fallback-value with arrays or something else.

The approach to fallback values should be tested and documented.

[miroslavstastny]

Maybe not a big deal with evergreen browsers as it used to be with IE 11 which we do not support.
But there are still cases, like overflow-overlay where the fallback values still make sense.