Fyrd
Add CSS Color Module Level 5 (color-mix(), color-contrast(), Relative color)
- Spec: https://www.w3.org/TR/css-color-5/
- ~~
color-adjust()~~ "Removed color-adjust(), keeping relative color syntax" color-mix()=> https://caniuse.com/mdn-css_types_color_color-mixcolor-contrast()=> https://caniuse.com/mdn-css_types_color_color-contrast- Relative color
- ~~
- https://twitter.com/equinusocio/status/1253646505900212226
- Virtually following up
color-mod#2864 - The
color-adjust()function is not to be confused with the property of the same name https://caniuse.com/#search=color-adjust - We could consider creating an issue for each of the functions
Two are coming as experimental with Safari TP 122:
- Added experimental support for CSS Color 5
color-contrast()(r273683) - Added experimental support for CSS Color 5
color-mix()(r273244)
color-mix() is available via MDN:
- https://caniuse.com/mdn-css_types_color_color-mix
- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()
color-contrast() as well:
- https://caniuse.com/mdn-css_types_color_color-contrast
- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast()
color-adjust() has been removed, per https://www.w3.org/TR/css-color-5/#changes-20210601:
Removed color-adjust(), keeping relative color syntax
I hadn't listed relative color syntax aka. "CSS Relative Colors", added now. More links:
- https://www.w3.org/TR/css-color-5/#relative-colors
- https://blog.jim-nielsen.com/2021/css-relative-colors/
- https://dev.to/fabiogiolito/create-a-color-theme-with-these-upcoming-css-features-4o83
With color-adjust() removed from the spec and color-mix() and color-contrast() being covered by MDN data (via mdn/browser-compat-data#9489, mdn/browser-compat-data#12039), that appears to leave this issue only covering relative colors.
The spec also defines @color-profile and device-cmyk(), but both already have an MDN page, so they're likely to be covered by MDN data in the future:
https://developer.mozilla.org/en-US/docs/Web/CSS/@color-profile
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/device-cmyk()
that appears to leave this issue only covering relative colors.
Check!
The spec also defines
@color-profileanddevice-cmyk(), but both already have an MDN page, so they're likely to be covered by MDN data in the future
Good to know! Those have also separate issues:
device-cmyk(): #1314@color-profile: #5958
Please give us the ability to be able to set the opacity of a custom property that is set to a hex color code. This is propably the most common use case for color adjustments. If you have a theme, each color is one variable (a hex color code), not 3 x RGB values one has to keep track of.
188K designers have sought for a fix for this on stackoverflow: https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable
:root {
--color: #f0f0f0;
}
#element {
background: (somehow use var(--color) at some opacity);
}
@mangelozzi I think you should voice this pain point at https://github.com/w3c/csswg-drafts/labels/css-color-5 More generally, methodically looking at the most popular CSS stackoverflow questions that have unsatisfying answers, and reporting them on the CSS specs working group would be a way to yield dramatically significant, reality-aligned improvements to CSS.
Links for relative colors:
- Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1274133
- Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1701488
- Implemented in Webkit behind a flag: https://bugs.webkit.org/show_bug.cgi?id=221880 (Safari TP 122)
Links to issues for color-contrast:
- Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1111385
- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1682439
- Implemented in Safari already behind a flag
https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes:
Added support for CSS relative color syntax.
yes, please add relative color syntax to caniuse! i've been checking for it periodically and end up slapping my forehead each time thinking i wasn't putting in the right incantations into the search box, to then finally realize it's not in there at all yet.
Someone needs to make three pull-requests.
What is the current state of all the other browser support? Does Chrome/Edge/other Chromium mobile browsers or Firefox support any of these three new features? Even in partial experimental state?
Can anyone find issues for Chromium and Gecko so we can link to them?
Are there any MDN pages yet?
@jensimmons To my understanding the only thing missing from caniuse covered by this issue is relative color, with the rest being available via MDN:
color-mix()- https://caniuse.com/mdn-css_types_color_color-mix
- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
color-contrast()- https://caniuse.com/mdn-css_types_color_color-contrast
- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast
Issues for relative color (comment above):
Links for relative colors:
Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1274133 Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1701488 …
Relative color syntax now available at https://caniuse.com/css-relative-colors
Closing this ticket now as all appear to be accounted for now, thanks all for helping to provide info. :)
