[css-color] Fallback color in @color-profile that uses RCS
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
There is the open question of what to do if a color profile fails to load, cannot be decoded, or simply while it's loading. https://github.com/w3c/csswg-drafts/issues/6129 contains the existing discussion on this.
Some implementors have expressed a reluctance to implement @color-profile because they do not want something as basic as colors to depend on an HTTP request. So, a good fallback strategy is essential for getting this rule implemented.
This is to propose another idea, which serves both as a fallback strategy, but also as a separate feature in its own right.
A mandatory fallback-color descriptor for @color-profile, which would accept any <color>, as well as support Relative Color Syntax with the components that the components descriptor has defined for the current color space.
In its most basic form, it can be a solid color, though that should be discouraged, for accessibility:
@color-profile --fancy {
src: url('...');
components: foo, bar, baz;
fallback-color: red;
}
It can be used to define a fallback color space, e.g. in this case display-p3:
@color-profile --fancyrgb {
src: url('...');
components: r, g, b;
fallback-color: color(display-p3 r g b / alpha);
}
But, most importantly, if there's no good fallback color space, it can be used to define a mapping to an existing space:
@color-profile --fancyrgb {
src: url('...');
components: r, g, b;
fallback-color: color(display-p3 calc(r * .8) calc(g * .8) calc(b * .8));
}
@color-profile --betterlch {
src: url('...');
components: l, c, h;
fallback: lch(calc(l / 100) calc(c / 300) h / alpha);
}
And, bonus, if we make the src descriptor optional, it can even be used to define custom color functions!
@color-profile --brand-red {
components: l;
fallback: lch(l 40 20 / alpha);
}
/* use like color(--brand-red 40) or color(--brand-red 50 / .4) */
(in which case maybe we should rename it to something more generic like @color-space or simply @colors)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the existing discussion in issue #6129 and the CSS Color 5 Relative Color Syntax section linked here. Compare the proposed mandatory fallback-color descriptor, its relative-color examples, and the optional-src/custom-function idea. This is complete when the CSSWG agrees on the fallback strategy, descriptor semantics, and any naming changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100