Fallbacks for older browsers

There is a nice, simple way of providing a fallback for older browsers – simply write the standard format first, and then the newer syntax straight after.

So, let’s say we wanted that “super green” P3 green, but know that we have a nice non-P3 version for browsers and hardware that don’t support P3 (note I’m also using the older syntax with commas for the sake of even older browsers):

background-color: rgb(0, 255, 0);
background-color: color(display-p3 0 1 0);

It doesn’t get much easier than that. Of course, we could also use @supports, which we looked at in detail in Chapter 6, CSS Nesting, Layers, Selectors, and More.

@supports (color(dispay-p3 0 1 0)) {
    background-color: color(display-p3 0 1 0);
}    

At first glance, the @supports version may seem more verbose. It is, until you start passing color values around as custom properties instead.

We cover custom properties fully...