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

It's getting late here, but just some quick thoughts on the meeting discussion:

> <heycam> ... rough approach is an @image rule, which provides a doubel dashed name
> <heycam> ... a bunch of descriptors, which takes a src image, then others which are copies of other CSS properites that do useful things
> <heycam> ... currently only supporting things you can already do to elements
> <heycam> ... once defined, you could use this image in CSS
> <heycam> ... image(--foo)

This was the initial proposal by @LeaVerou but the discussion since moved towards a rule purely used for manipulating the images and using a function to specify the source image.

> <fantasai> heycam: Alternative approach is to slam all of these filtering and transforms into the image() function itself

This is definitely an interesting approach that would probably make animation easier and easily allow applying manipulations in order. Though I assume it may also quickly get quite complicated syntax-wise.
I still need to give that some deeper thought. But it also doesn't seem to exclude each other.

> <heycam> dbaron: could you talk briefly about how sizing of these images works?
> <heycam> ... looks like there's some sizing related properties in there
> <heycam> ... transforms and filters which might have sizing implementations
> <heycam> TabAtkins: you have a width/height property
> <heycam> ... that's the natural width/heihgt of the produced image
> <heycam> ... scaling etc. would be purely visual effects

I imagined `width: auto;` and `height: auto;` to be possible, meaning that transforms and effects like blurs would change the size of the canvas to fit in the manipulated image.

Imagine you rotate an image by 30 degrees and you want it not to be clipped. Without auto-sizing, you have to calculate the new size of the canvas yourself, then calculate the padding that is needed to get that size to finally be able to rotate the image.

> <heycam> fantasai: what else is in images 5?
> <heycam> Rossen: almost nothing
> <heycam> fantasai: current images is images-4. images-5 is just an ED, don't think there's anything even in it

The repository doesn't hold any images-5 ED yet. There are just a few [issues labelled with css-images-5](https://github.com/w3c/csswg-drafts/issues?q=is%3Aopen+is%3Aissue+label%3Acss-images-5).

Sebastian

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


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

Received on Thursday, 15 September 2022 22:00:53 UTC