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

`+(50%)` might be a bit less convenient because you can not drop the leading `+` to toggle between absolute and relative. You also need to remove the parenthesis.

------

Have looked at this a bit more and there is one case that hasn't been called out in the examples explicitly.

When dealing with mixed units it is unknown which values are larger.

This won't work at all :

```css
.foo {
 background: linear-gradient(red 20px, blue 10vi, green 10vw, yellow 5rem, orange 10ex);
}
```

To express a progression with mixed units you currently need to wrap every preceding value with `max()`. After a few stops this escalates dramatically.

This will work :

```css 
.foo {
 background: repeating-linear-gradient(red 20px, blue 0 10vi, green 0 ++10vw, yellow 5rem, orange ++10ex);
}
```

And is equivalent to :

```css
.foo {
 background: repeating-linear-gradient(red 20px, blue 0 10vi, green 0 calc(max(20px, 10vi) + +10vw), yellow 5rem, orange calc(max(calc(max(20px, 10vi) + +10vw), 5rem) + +10ex));
}
```

This is not an argument in favor of any proposed syntax but it does show that this proposal tries to solve something that is really difficult today.


-- 
GitHub Notification of comment by romainmenke
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8616#issuecomment-1476377846 using your GitHub account


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

Received on Monday, 20 March 2023 14:52:39 UTC