Skip to content

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

Open
@ai

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions