[css-images-4] Add <1d-image> to <image>

[SebastianZ]

In #2532 it was discussed to allow one-dimensional images in two-dimensional contexts. Lately it was resolved to discuss this feature separately from the original use case of one-dimensional images.

So far, there were four ideas and opinions on them. I've summarized them here (in the order they were mentioned) including their pros and cons:

1. Add <1d-image> directly to <image>

   Example:

   background-image: stripes(red, yellow, lime, blue);
   shape-outside: stripes(black, transparent 20%);

   Pros:

   • 1D images can be used everywhere where <image> is supported

   Cons:

   • No directionality (only from top to bottom), so, very limited use (could be mitigated by introducing image manipulations as discussed in [css-images] @image rule for manipulating images #6807)

2. Add <1d-image> to existing gradient functions

   Examples:

   background-image: linear-gradient(45deg, stripes(red, yellow, lime, blue));
   shape-outside: radial-gradient(stripes(black, transparent 20%));

   Pros:

   • Existing gradient functionality is reused
   • Syntax is reused in different contexts
   • Besides linear stripes also radial and conical stripes and their repeating variants possible

   Cons:

   • Nested functions
   • Semantically incorrect

3. Create separate stripes functions

   background-image: linear-stripes(45deg, red, yellow, lime, blue);
   shape-outside: radial-stripes(black, transparent 20%);

   Pros:

   • Similar to gradients without nesting

   Cons:

   • Behavior of thickness different to length in gradients
   • No reuse of <1d-image>

4. Add keyword to existing gradient functions

   background-image: linear-gradient(45deg stripes, red, yellow, lime, blue);
   shape-outside: radial-gradient(stripes, black, transparent 20%);

   Pros:

   • Existing gradient functionality is reused
   • No nesting

   Cons:

   • Behavior of thickness different to length in gradients
   • No reuse of <1d-image>

Sebastian

[tabatkins]

I'm weakly against adding <1d-image> to <image>, for the reason @fantasai gave in the call - this appears to largely be a "just because" thing, not something actually driven by any use-case, and so it's not worth the speccing, testing, and implementation effort even if it's easy to do. We can always add it later if we decide it would be useful.

This issue is mixing two separate issues, however; your options 2/3/4 are all about the separate issue of "how to define a gradient with stripes()-like syntax" (that is, using stripe lengths, rather than color-stop positions). This shouldn't be conflated with allowing stripes() as a plain <image>.

[SebastianZ]

Yes, the first approach to adding 1D images to 2D contexts is distinct from the other ones, as it allows 1D images directly to be used in 2D contexts. The other ones are using gradients or gradient-like ways to bring 1D images to 2D contexts. And this makes solution 1 independent from 2, 3 and 4.
So, I've split the indirect approaches into #7244 now, so they can be discussed separately.

After rethinking this, I actually agree with you and @fantasai to not add <1d-image> to <image> directly due to its limited usefulness by itself.

@LeaVerou You seem to be the one that initially brought up this idea. So maybe you could explain why adding <1d-image> directly to <image> would be worth the effort.

Sebastian

[LeaVerou]

FWIW I have no strong opinion about adding <image-1d> to <image>, I think it's primarily useful for debugging and to follow the principle of least surprise, but I agree the use cases are few and far between.

I have a somewhat stronger opinion about allowing stripes() in gradient functions. I think given that gradients accept a gradient line already, and people use them to specify stripes already, allowing stripes() in there is simply paving the cowpaths, and allows them to benefit from all existing gradients machinery, without needing separate justification for everything or separate functions that need to be kept in sync. Having separate functions with similar syntax has been a host of issues in the past. Also, nothing prevents us from adding convenience syntax later, if stripes() in gradient functions becomes commonly used.

But perhaps most importantly, stripes() is just one example of <image-1d>. There may be more in the future. All I'm arguing for is that gradient lines should be specifiable as <image-1d>. The alternative proposal seems to want to add ad hoc methods for every single type of 1d image, which doesn't scale well.

[SebastianZ]

@LeaVerou Note that I've split up the discussion into two issues after Tab's comment about their being two different things to be discussed.

So, I focused this one on adding <1d-image> directly to <image> and #7244 about stripes being used as gradients.

Regarding your initially posted question:

I’m confused, didn't we resolve in the call last week not to do this? Why are we still debating it?

The resolution was:

Remove <1d-image> from for now, open a separate issue to discuss it

So that's what I did. 😄

I don't have a strong opinion on that but as I wrote in my last comment, I agree with the argument that it has very limited usefulness by itself. It would need #6807 or similar mechanics to actually be useful to authors beyond defining horizontal stripes.

Sebastian