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

@booluw wrote:
> I think the sizes of those SVGs and gradients should be the values defined in the `manipulation rule`, since the image is being created.

You are right that a new image is created by manipulating the source image. And with `width`, `height` and `aspect-ratio` you can define the sizes of the manipulated image.
Though my question was how would a `width: 80%;` be interpreted when the source image doesn't have an intrinsic width? I guess, the answer in that case is that the width of the manipulated image is undefined as well.

> That is; the image has it own box model, before being added to that of the element it is being applied to. Which implies that all box-model properties also work on the image.

I wouldn't say that the image has its own box model. There are properties like `padding` or `box-sizing` that don't apply to it.

@ydaniv wrote:
> There's another interesting use-case, I've mentioned it to @LeaVerou at CSSDay, having the `@image-manipulation` add filters to the image and have the browser cache that, so that animating it later, using `transform` for instance, will not cause browsers to melt down.

I expected the images generated by an `@image-manipulation` rule to always be cached because the manipulations are only applied once to an image. Or are there use cases, in which dynamically applying the rules is required?

@jsnkuhn wrote:
 We have one background image that is then rotated in different ways to create slightly visually different backgrounds for the different links.
> 
> ```
> @image-manipulation rotate-x-y {
>   transform: rotate(180deg);
> }
> @image-manipulation rotate-x {
>   transform: rotateX(180deg);
> }
> @image-manipulation rotate-y {
>   transform: rotateY(180deg);
> }
> 
> a {background-image: url(yellow.webp);}
> 
> a:nth-of-type(2) { background-image: url(yellow.webp), rotate-x-y; }
> a:nth-of-type(3) { background-image: url(yellow.webp), rotate-x; }
> a:nth-of-type(4) { background-image: url(yellow.webp), rotate-y; }
> ```
> 
> in this case having to repeat the `background-image: url(yellow.webp),` bit seems a bit clunky. Maybe there a way to do something more like `manipulation-name` taking a cue from the already existing `animation-name` property?

The proposed syntax would actually look like this:

```css
a:nth-of-type(2) { background-image: manipulate-image(url(yellow.webp), rotate-x-y); }
a:nth-of-type(3) { background-image: manipulate-image(url(yellow.webp), rotate-x); }
a:nth-of-type(4) { background-image: manipulate-image(url(yellow.webp), rotate-y); }
```

I know, that makes it even longer to write.
Though `manipulate-image()` generates an `<image>` value. That value can be used in many different properties like `border-image-source`, `mask-image`, `list-style-image`, etc. And each one could have its own image manipulation applied. Therefore, a property like `manipulation-name` (or rather `background-image-manipulation`) that is bound to another property wouldn't make sense.

Though I assume the final name for the image manipulation function probably won't be that long.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6807#issuecomment-1153311433 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 22:41:45 UTC