According to what I read in the article, you have to provide the sRGB fallback yourself. I suppose this is only a true annoyance if you're writing CSS by hand (like I do), but I hear most people these days use Less or some other CSS preprocessor that can easily handle this.

The article mentions the manual fallback for when the browser does not support the syntax, but I wonder what happens when Chrome gets updated to support color() but is used on a device that does support Wide Gamut Color. I guess the safest thing would be to still treat it as an invalid value and require manual fallback.

This may already happen on Safari and Mac without support for Wide Gamut Color. In that case, the P3 color is converted to sRGB, which typically means clamping to sRGB.

Media Queries are the right answer for that case (assuming the default translation to SRGB is unsatisfactory.)

Chrome should, per the spec, drop the entire rule

Glad to hear there are others out there practicing this fine art haha

If your monitor doesn't cover the entirety of P3, it does "degrade" to the closest color your monitor is capable of showing. This isn't necessary sRGB — most monitors that don't fully support P3 yet still support gamuts wider than sRGB.

I don't know whether relative or perceptual colorimetric rendering intent is used.

You can open https://codepen.io/NV/pen/XLOOdE in Safari Technology Preview and check how it looks on various monitors.

There is no such thing as a monitor degrading. The monitor displays the color values it receives, period. It does not do profile conversion. It does not know anything about rendering intent. It doesn't even know about color profiles. It knows: Display this RGB value for this pixel. That's it.

It is up to the software driving the display to choose appropriate color values. That means that if a monitor has the Display-P3 gamut, then it is up to the OS or browser to know this, and send appropriate color values when viewing sRBG data such that the colors are not oversaturated.

Yes, graphics cards can store LUT tables to linearize the RGB curves to neutralize grays. But this is not gamut mapping. Profiling is a process that happens after a display is linearized, and that profile is loaded into the OS.

I'm in the color print industry. I know color management intimately.

You’re expected to provide two color declarations for every element. This is normal practice for backwards-compatibility in web design, so there’s nothing surprising in the method. Frameworks that generate CSS will quickly learn to handle this for us and it’ll be fine.