Re: [csswg-drafts] [css-anchor-position][css-position] Fixing the animation problem (#9598)

Okay, further discussion with Anders and Rune led to some more evolution in this idea. They pointed out that the “`inset-area` affects `inset:auto` values” thing can't actually be done at computed-value time, like I hoped, because it relies on the writing mode of the containing block, and the containing block tree isn't built until later. So `inset-area` can't turn into animatable computed values *anyway*.

But, now that we're entertaining the “just make a magic way to animate good” solution, we don't actually need `inset-area` to be itself animatable in the first place. We can return `inset-area` to modifying the containing block itself, like in Apple's [earlier draft](https://fantasai.inkedblade.net/style/specs/css-anchor-exploration/), and still retain the animatability we wanted. This means that the `inset` properties would now *compose with* `inset-area`, rather than being an *alternative to* it.

So @fantasai and I have an expanded Round 3 of the proposal:
    
1. `inset-area` just changes the containing block, and `inset` properties then inset from that modified block (as [proposed by Apple](https://fantasai.inkedblade.net/style/specs/css-anchor-exploration/#area-insets) in July)
 * This is a better separation of functionality.
 * Allows for more powerful offsetting than margins do (because margin %s are always relative to inline avaiable space, while inset %s are relative to their own axis).
 * Lets us fix overconstrained cases when the anchor starts outside of the CB in a more deliberate way (rather than just relying on the 'top'/'bottom' /etc biasing rules).
 * Also addresses the “absolute positioning, but in reference to the element I specify, not the nearest positioned ancestor” use case.
2. `auto` insets always compute to 0 when `inset-area` is non-`none`.
3. `normal` alignment adjusts based on the `inset-area` (per axis):
 * If the `inset-area` is center, or all three tracks: `normal` alignment resolves to `anchor-center`
 * Otherwise: `normal` aligns towards the “missing” areas.
 * Examples: `inset-area: top / all;` would align as `align-self: end; justify-self: anchor-center;`, while `inset-area: top / left center;` would instead use `justify-self: end;`/
4. “Good” interpolation is done by a separate property (provisionally called 'position-animation') that represents the used position, see [positioning package method, above](https://github.com/w3c/csswg-drafts/issues/9598#issuecomment-1817244328).

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


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

Received on Friday, 1 December 2023 22:17:47 UTC