Re: [csswg-drafts] [css-images-4] Allow stripes to be used as gradients (#7244)

> ```css
> background-image: linear-stripes(45deg, red 25%, yellow 30%, lime 40%, blue);
> ```
> 
> > But the big downside here is that the syntax regarding the color stops is not the same because the meaning of thickness is different from the positioning syntax for color stops in gradients.
> 
> The syntax isn't fully described in this issue - the lengths above would be the thicknesses? So we have a red stripe from 0-25%, a yellow stripe from 25%-55%, a lime stripe from 55%-95% and blue for the final 5%?

Correct. The actual syntax for the color stops hasn't landed in the spec. yet but it is defined in #7029. With that syntax, the blue stripe would actually be interpreted as flexible value taking up the remaining space. So, in this case it is equivalent to 5%.
In the following example red and blue would split the remaining space of 30% between them in a ratio 2:1:

```css
background-image: linear-stripes(45deg, red 2fr, yellow 30%, lime 40%, blue 1fr);
```

Same here with the remaining space being 100% - 50px:

```css
background-image: linear-stripes(45deg, red 2fr, yellow 20px, lime 30px, blue 1fr);
```

> This is a sensible way way to specify them, but I think it also means it must be option 2 as we really shouldn't make the meaning of lengths within a function depend on some other parameter.

The meaning of lengths also stays the same in option 1 because of reusing `stripes()` which uses this syntax within the gradients functions.

I can see the logical conflict here as authors might expect that the same syntax is shared between both but this issue also applies to option 2.

> Overall I really like this suggestion - it's essentially syntactic sugar for a linear-gradient with a 0-length transition between colors, which are a bit of a pain to specify when there are lots of stripes.

Right, I mentioned that earlier somewhere, but yes, the point of this is to simplify 0-length transitions between colors. That means e.g. `linear-stripes(red, yellow, lime, blue)` would be equivalent to `linear-gradient(red 25%, yellow 25%, yellow 50%, lime 50%, lime 75%, blue 75%)` and instead of `linear-gradient(red 20px, yellow 20px, yellow 50%, lime 50%, lime calc(100% - 20px), blue calc(100% - 20px))` you could write `linear-stripes(red 20px, yellow, lime, blue 20px)`.
In addition to that we get flexible values, which isn't really possible at the moment (or at least extremely cumbersome because you'd have to calculate the percentages yourself).

Sebastian

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


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

Received on Tuesday, 3 May 2022 10:23:02 UTC