Re: [csswg-drafts] [css-images] @image rule for manipulating images (#6807)

Just a recap, as it seems, people have forgotten about or have different understandings of the proposals:

@LeaVerou's initial idea was to create an image and manipulate it with this at-rule by defining the image source via the `src` descriptor and applying manipulations to it via the other descriptors.
[My idea](https://github.com/w3c/csswg-drafts/issues/6807#issuecomment-1061619899) was to just put the manipulation rules into the at-rule (without `src` descriptor), so you can reuse it for several images.

@LeaVerou wrote:
> You could easily create new images by starting something like `src: image(transparent)` or `src: linear-gradient(...)`

@booluw wrote:
> `@image() / @image` is better, please. And if a user would use a gradient instead, should be defined inside of `@image()` since an image is been 'created/manipulated' with that rule.

Did you think of the initial proposal or do you expect the `src` descriptor to be optional? If the latter, this would merge both proposals, i.e. allow to define a one-off manipulation when the `src` descriptor is provided _or_ to reuse the manipulation by skipping the descriptor. Though that would also complicate the rule both for implementors and authors because it provides two different functionalities behaving different in different contexts.

Linear gradients (like any other images) are covered by both proposals.

In Lea's proposal:
```css
@image --rainbow-circle {
  src: linear-gradient(red, yellow, lime, blue, purple);
  width: 400px;
  aspect-ratio: 1;
  clip-path: circle(400px);
}

.rainbow {
  background-image: image(--rainbow-circle);
  background-size: contain;
}
```

My proposal:
```css
@image-manipulation --rainbow-circle {
  width: 400px;
  aspect-ratio: 1;
  clip-path: circle(400px);
}

.rainbow {
  background-image: manipulate-image(linear-gradient(red, yellow, lime, blue, purple), --rainbow-circle);
  background-size: contain;
}
```

@booluw:
> Doesn't the `width` here causes a conflict with `background-size` property? Having two different widths might just leave room for buggy implementation.

@jsnkuhn expected the at-rule to work on the box model. Though the idea is to let it work on the image.

A `width` in that rule means to manipulate the image's intrinsic width. The same applies to `height` and `aspect-ratio`. So, if an image has a size of 1000px x 1000px and you apply `width: 500px` to it, it's intrinsic size is then 500px x 1000px. And _that_ image can then be used with `background-size`. So it is like you initially you provided an 500px x 1000px image.
(See the example above where the generated image has an intrinsic width of 400px but is then resized via `background-size: contain` based on the size of the element it is used in.)

An issue that can arrise is when images do _not_ have an intrinsic size like gradients, colors or some forms of SVGs. For them it needs to be defined what happens when you provide percentages or other relative units like `em`.

Sebastian

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


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

Received on Sunday, 12 June 2022 06:55:50 UTC