[css-color-5]: Relative Colors doesn’t work with `calc(l + 10%)`

[ai]

I found that this CSS doesn’t work in all browsers:

.broken {
   --base: oklch(70% 0.1 30);
  background: oklch(from var(--base) calc(l - 10%) c h); /* browsers ignore it */
}

The only way to change lightness is to avoid % by using calc(l - 0.1).

It looks confusing to me. But I don’t know what part of the spec prohibits it.

Demo: https://codepen.io/iskin/pen/GRabXPr

[romainmenke]

From css-color-5: https://drafts.csswg.org/css-color-5/#relative-syntax

The channel keywords return a <number>; if they were originally specified as a <percentage> or an <angle>, that <percentage> is resolved to a <number> and the <angle> is resolved to a <number> of degrees (which is the canonical unit) in the range [0, 360].

The l in calc(l - 10%) is of type <number>.

---

From css-values-4 : https://drafts.csswg.org/css-values-4/#mixed-percentages

More <type-percentage> productions can be added in the future as needed. A <number-percentage> will never be added, as <number> and <percentage> can’t be combined in calc().

calc(l - 10%) doesn't work because it is calc(0.1 - 10%) / calc(<number> - <percentage>) which isn't possible following the css-values spec

---

The most recent discussion about this can be found here : https://github.com/w3c/csswg-drafts/issues/9955

[gyurmey2]

Hi, I just discovered a similar issue where relative colors don't work without declaring a degree unit.

Is this just an iOS/Safari issue?

[romainmenke]

Hi, I just discovered a similar issue where relative colors don't work without declaring a degree unit.

This has already been resolved in latest Safari Technical Preview