w3c / w3c/csswg-drafts

[css-color] Fallback color in @color-profile that uses RCS

Open
#6,767 19 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-color-5
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.