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 if we wanted that “super green” P3 green but know that we have a nice 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);

Doesn’t get much easier than that. Of course, we could also use @supports, which we looked at in detail in the last chapter, CSS Selectors, Typography, 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 in Chapter 12, Custom Properties...