[csswg-drafts] [css-images-4] Allow 1D images to 2D contexts (#7241)

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

== [css-images-4] Allow 1D images to 2D contexts ==
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 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:
   ```css
   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 https://github.com/w3c/csswg-drafts/issues/6807)

2. 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

4. 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>`

6. 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/7241 using your GitHub account


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

Received on Sunday, 1 May 2022 19:46:11 UTC