Intent to Ship: CSS Color Module Level 4 + color-mix()

[Aaron Krajeski]

Contact emails

aar...@chromium.org, fs...@chromium.org, ccam...@chromium.org, fut...@chromium.org, juan...@chromium.org

Explainer

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Specification
https://www.w3.org/TR/css-color-4/
https://www.w3.org/TR/css-color-5/

Summary

Several new features are being added to CSS Colors from CSS Color Module Level 4:

  1. New color types: lab, Oklab, lch, Oklch

  2. color() function for specifying colors with predefined color spaces.

  3. Ability to specify color spaces for animations and transitions.

  4. Users can now specify color spaces for gradients. 

Additionally the color-mix() function is being added from CSS Color Module Level 5.

Blink component

Blink>CSS

TAG review

TAG review status

Not applicable

Risks

Interoperability and Compatibility

Interoperability is one of the major motivations for implementing these new features, as "Color Spaces and Functions" is one of the categories emphasized in Interop 2022:

https://web.dev/interop-2022/

https://wpt.fyi/interop-2022

Active work is taking place to keep all major browser vendors synchronized by collaborating on web platform tests and comparing results.

Gecko: Shipped/Shipping (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 

WebKit: Shipped/Shipping (https://webkit.org/blog/6682/improving-color-on-the-web)
https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/

Web developers: Strongly positive Several partners (Adobe/Figma for example) have expressed interest in the new color API.

Debuggability

Dev-tools team is currently working on implementing an improved color picker, color space translation tool and others.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes, all tests in wpt/css/css-color/
As of this moment we pass 6594 out of 9702 (Firefox passes 5729 and Safari passes 7020), we intend to pass them all before shipping to stable.

Flag name

enable-experimental-web-platform-features

Requires code in //chrome?

False

Sample links

https://codepen.io/argyleink/pen/RwyOyeq

https://2021-hd-color-at-css-camp.netlify.app

Estimated milestones

We intend to turn these features on in Canary and Dev as soon as we pass the remaining WPT tests and ship to stable for Chrome 110 in December.

Anticipated spec changes

The gamut mapping section of the spec (https://www.w3.org/TR/css-color-4/#gamut-mapping) is not included here, and will need changes or likely need to be dropped entirely as it is a performance issue and is untested and unimplemented everywhere:
https://github.com/w3c/csswg-drafts/issues/7653
https://github.com/w3c/csswg-drafts/issues/7610

There are still some issues to be ironed out with resolving color-mix:
https://github.com/w3c/csswg-drafts/issues/7302

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5147752829288448

This intent message was generated by Chrome Platform Status.

[Yoav Weiss]

Is that the right link? 

[Aaron Krajeski]

Gecko: Shipped/Shipping
(https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)

Is that the right link?

Mozilla hasn't published anything specific on implementing CSS color 4
but their documentation now lists all of the functions defined within
it. That link has entries for lab, lch and interpolation, for example.
The new functions are implemented in Firefox Nightly and that browser
is currently passing most of the tests on interop:

https://wpt.fyi/results/css/css-color?label=experimental&label=master&aligned

[Mike Taylor]

On 10/25/22 10:58 AM, 'Aaron Krajeski' via blink-dev wrote:
> Gecko: Shipped/Shipping
> (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
>
> Is that the right link?
>
> Mozilla hasn't published anything specific on implementing CSS color 4
> but their documentation now lists all of the functions defined within
> it. That link has entries for lab, lch and interpolation, for example.
> The new functions are implemented in Firefox Nightly and that browser
> is currently passing most of the tests on interop:

(Note that MDN documents many things that are not implemented in Firefox
- it's not intended to be browser-specific).

[Yoav Weiss]

I think these 2 TAG reviews are related to this:

https://github.com/w3ctag/design-reviews/issues/488

https://github.com/w3ctag/design-reviews/issues/526

On the API owners call, we thought we should notify the TAG regarding the diff between these reviews  and what you're planning to ship here.

Their feedback is not a blocker for this (as Safari already shipped this), but it seems useful for them to be aware of all this colorspace action.

>>>
>>> TAG review status
>>>
>>> Not applicable
>>>
>>>
>>> Risks
>>>
>>> Interoperability and Compatibility
>>>
>>> Interoperability is one of the major motivations for implementing these new features, as "Color Spaces and Functions" is one of the categories emphasized in Interop 2022:
>>>
>>> https://web.dev/interop-2022/
>>>
>>> https://wpt.fyi/interop-2022
>>>
>>> Active work is taking place to keep all major browser vendors synchronized by collaborating on web platform tests and comparing results.
>>>
>>>
>>> Gecko: Shipped/Shipping (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)

Looking at the links, I think they haven't shipped yet, but are probably working on it.

https://bugzilla.mozilla.org/show_bug.cgi?id=1352757 and their support for Interop 23 on this seems like a better signal.

[Aaron Krajeski]

I think these 2 TAG reviews are related to this:

https://github.com/w3ctag/design-reviews/issues/488

https://github.com/w3ctag/design-reviews/issues/526

Commented on both threads! For lab() and lch() there was no obvious delta, so I just pointed them at the draft spec. For color-mix there were some very small differences in input syntax, I highlighted these and pointed at the draft spec and tests.

[Yoav Weiss]

LGTM1

[Philip Jägenstedt]

Will the new DevTools support ship at the same time as that feature? Is there a tracking bug for that?

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfX%3Dy%3DpZCkfPcsY_wi0mrzBHv5V5TOaWAPbrRo6kC-7M4w%40mail.gmail.com.

[Aaron Krajeski]

Will the new DevTools support ship at the same time as that feature?

Mostly likely not, though the dev tools team is hard at work on features right now:
https://docs.google.com/document/d/1PfWpeOmRIifRLYYLyAADUPXmanMcu1gK6Y9pzDsEx_U/edit?usp=sharing

Is there a tracking bug for that?

Yup! crbug.com/1073895

cc-ing Peter Müller for Dev Tools specific stuff.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Philip Jägenstedt]

What will be the devtools experience without that support? Will it somewhat work and treat the value as an opaque string, or will it be broken because it's not recognized?

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

[Aaron Krajeski]

What will be the devtools experience without that support? Will it somewhat work and treat the value as an opaque string, or will it be broken because it's not recognized?

The value becomes an opaque string, but the color picker does not appear.

[Rick Byers]

On Thu, Oct 27, 2022 at 3:09 PM 'Aaron Krajeski' via blink-dev <blin...@chromium.org> wrote:

What will be the devtools experience without that support? Will it somewhat work and treat the value as an opaque string, or will it be broken because it's not recognized?

The value becomes an opaque string, but the color picker does not appear.

That seems reasonable enough to me to ship given Safari has already shipped and this is a focus of Interop 2022.  Glad to hear work is progressing on first class DevTools support.

LGTM2 to ship when the WPT pass rate is at (or near) 100% as planned.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/a7881e14-4b8a-483c-abf0-24cab0691778n%40chromium.org.

[Daniel Bratell]

LGTM3 (note Rick's condition)

/Daniel

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY-8QZjS19VW937GpcTcB7g2ZTx%3D0mnVSA%2BroSnHMm2f3A%40mail.gmail.com.

[Steve Justice]

Thanks 

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/19b5bef7-d03f-be2a-0dd4-e0ae6bca0c0e%40gmail.com.