[csswg-drafts] Proposal: Add an incremental syntax to CSS Gradients (#8616)

Afif13 has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: Add an incremental syntax to CSS Gradients ==
I think it's good to have a kind of "relative values" to express a relation between two consecutive color stops.

Let's say I have `linear-gradient(red 20%,blue 40%,green 60%)` where each time I am adding `20%` to the color stops. It would be good if I can, instead, write `linear-gradient(red 20%,blue +20%,green +20%)`. The plus sign means "take the last color stop and increment it". This way we can easily express the `20%` as a variable and reuse it.

Here are a few more examples:

```css
/* Instead of */
background: linear-gradient(red 50%, blue calc(50% + 1px));
/* We write */
background: linear-gradient(red 50%, blue +1px);

/* Instead of */
background: linear-gradient(red 20%, blue calc(20% + 20px), green calc(20% + 40px));
/* We write */
background: linear-gradient(red 20%, blue +20px, green +20px);

/* Instead of */
background: conic-gradient(red 60deg, blue 120deg, green 180deg, yellow 240deg);
/* We write */
background: conic-gradient(red 60deg, blue +60deg, green +60deg, yellow +60deg);
/* We can also write */
background: conic-gradient(red +60deg, blue +60deg, green +60deg, yellow +60deg);
/* the first +60deg will be relative to 0deg so the same as 60deg */


/* Instead of */
background: repeating-linear-gradient(red 0 10px, blue 0 20px);
/* we write */
background: repeating-linear-gradient(red 0 10px, blue 0 +10px);
/* the browser will transform the 0 after blue to 10px then will use that value as a reference for the next one to have 10px+10px = 20px
/* we can also write it like below */
background: repeating-linear-gradient(red 0 +10px, blue 0 +10px);
/* the "0 +10px" can be a variable */

```

I think the `+` won't create any confusion in the syntax. It can be an optional character before the value to indicate if the value is static or relative.

The calculation should also be done after the [Color stop "Fixup"](https://w3c.github.io/csswg-drafts/css-images-4/#color-stop-fixup) like I did in the last example. When doing `linear-gradient(red 150px, blue 70px +50px)` we should have `150px + 50px` and not `70px + 50px`. 




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8616 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 19 March 2023 20:27:21 UTC