Re: [csswg-drafts] Anchor positioning proposal comparison `[css-anchor-position]` (#9117)

@stubbornella Thank you for this compilation! I'm slowly working on an article with my thoughts about this proposal, and this comparison is very helpful.

TL;DR for what I think: I really like some of the aspects of this proposal, and I think there could be a way to combine both the existing spec and it, merging the best parts of both. I really like the flexibility of the current implementation in Chrome, but I can see how the new exploration covers the areas the current spec lacks in — centering/aligning things, grid-like positioning, the `::tether` pseudo-element.

A few quick notes (not exhaustive) regarding the comparison:

1. Re: “Tether” — while there is nothing that is intended directly for its purpose, it is possible to implement almost any kind of tethering with the current specs, not in the neatest way, and with hacks like [“four quadrants”](https://kizu.dev/anchor-positioning-experiments/#the-technique-itself) instead of the area-specific styles via `::tether(top / right)` etc.

2. “Animations and transitions” — the current specs only allow transitions when changing the anchor inside the `anchor()`/`anchor-size()`, but not when swapping the values of the `anchor-name` (which could be more convenient for a lot of cases). A related issue: https://github.com/w3c/csswg-drafts/issues/8181#issuecomment-1469910645

3. “Center alignment” — it is possible to _kind of_ work around its absence, but we don't have anything from the box that works for just one element at the moment. A related issue: https://github.com/w3c/csswg-drafts/issues/8979

4. “Multiple anchors” — one thing to note is that the main thing that prevents the new exploration from covering this use case is the way the lookup is defined in the https://fantasai.inkedblade.net/style/specs/css-anchor-exploration/#anchor-lookup by using the first element in the scope instead of the last. In my experiments, using the last element was much more convenient for almost every use case I tried, and it unlocks a lot of other use cases like nested dropdown menus.

5. “Styling the anchor to sit on top of the backdrop” — in my experiments, it is possible to work around this by “faking” it by creating a “hole” in the backdrop, either via a very large box-shadow, an outline, or in other ways. See this CodePen: https://codepen.io/kizu/pen/zYMBwNQ

6. “Automatic with no author code, ‘Tess mode’” — can you expand on what this means?

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


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

Received on Wednesday, 26 July 2023 12:28:47 UTC