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...