Re: [csswg-drafts] [css-anchor-position-1] Better reusability of anchor names (#9045)

One thing we can currently do to scope the anchor names is to use `position: relative` on a wrapper: https://jsfiddle.net/3fpukxan/

Interestingly, this does not work if we add the `position: relative` to the element that has `anchor-name` itself: https://jsfiddle.net/3fpukxan/1/ — cc @tabatkins — is this expected? As an author, I would expect the `position: relative` with an `anchor-name` to continue providing this name to any nested elements that could want to use it as an anchor.

However, as I did mention in https://github.com/w3c/csswg-drafts/issues/8588 (this issue could be considered a duplicate of it, maybe?), I don't like this implicit behavior of `position`, with implicit scopes. While it can be useful, as an author, I would want more control over when a scope is created.

Playing with scroll-driven animations, I did appreciate how it had the ability to define explicit scopes via `timeline-scope` property.

So, my proposal: what if we had an `anchor-scope` one?

I imagine it work like this:

> Name: `anchor-scope`
> Value: `auto` | `all` | `none` | `<dashed-ident>#`
> Initial: `auto`
> Applies to: all elements that generate a principal box
> 
> The `anchor-scope` property declares the `anchor-name` lookup scope on this element's subtree, including the element itself. This allows any properties on the elements in the subtree to only consider elements inside this scope as the acceptable anchor elements. Values are defined as follows:
> 
> `all`: Declares the scope for all explicit anchor elements.
>    
> `none`: The property has no effect.
> 
> `auto`: Resolves to `all` if this element is a containing block, and to `none` otherwise.
> 
> `<dashed-ident>`: Specifies the anchor name that would be scoped by this element. All other anchor names could escape this scope.

(This is a very quick draft; I imagine there can be other use cases to consider, like “do we want to have an inversion of the `<dashed-ident>`, like if we want to have `all` but let some specific anchor names escape it?”, but I hope the idea is clear.)

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


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

Received on Wednesday, 19 July 2023 22:55:00 UTC