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

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

== [css-images-4] Allow stripes to be used as gradients ==
In https://github.com/w3c/csswg-drafts/issues/2532 it was discussed to allow one-dimensional images in two-dimensional contexts. Lately [it was resolved](https://github.com/w3c/csswg-drafts/issues/2532#issuecomment-1111207894) to discuss this feature separately from the original use case of one-dimensional images.

So far, there were four ideas to achieve that. The direct way of adding `<1d-image>` to `<image>` is discussed in #7241. The other three all have in common that they refer to gradients or gradient-like funcions. I've summarized them here (in the order they were mentioned) including their pros and cons:

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

   Examples:
   ```css
   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

2. Create separate stripes functions

   ```css
   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>`

3. Add keyword to existing gradient functions

   ```css
   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

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


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

Received on Monday, 2 May 2022 20:45:40 UTC