Wednesday, March 4, 2020

Wide Gamut Color in CSS With Display-P3

Nikita Vasilyev (Hacker News):

WebKit is the only browser engine that supports Display-P3 color as of January 2020.

[…]

One way to provide a fallback is to include the same property with the sRGB color before:

header {
    color: rgb(0, 255, 0);
    color: color(display-p3 0 1 0);
}

Browsers other than WebKit currently parse color(…) as invalid value. CSS properties with invalid values are ignored by the browsers.

Alternatively, you can use @supports feature query.

2 Comments RSS · Twitter

Sören Nils Kuklau
March 4, 2020 5:08 PM

I really don’t like the syntax. Why color: color()? Why no commas? Why doesn’t this specify that it’s rgb (I assume?) as opposed to, say, hsl?

Seems to me it should’ve been something more like color: rgb-p3(0, 1, 0), but maybe I’m missing something.

Damiano Galassi
March 5, 2020 3:22 AM

"color:" is only one of many css properties that can take a color. One of the advantages of color() is that you can use the same function name for multiple color spaces. It doesn't seems too bad.

Leave a Comment

Copyright © 2000–2024 Michael Tsai.