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

tigrr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-anchor-position-1] Better reusability of anchor names ==
Spec: https://drafts.csswg.org/css-anchor-position-1/

The anchor name is currently defined to be a tree scoped reference (i. e. unique for the entire document). This makes it difficult to reuse.

For example tooltips on elements are often implemented using a class or an `aria-label` attribute together with a pseudo-element holding text from that attribute. 

In [this fiddle](https://jsfiddle.net/tikosar/xv681qpb/) you can see that all 3 of the tooltips are positioned on the first element defining `anchor-name`, not on their closest ancestor as one may have expected.

Anchor names being unique throughout the document forces us to explicitly name an anchor for each and every one of those elements with tooltips. And there may be hundreds of them on the page. 

If `anchor-name` was not defined as unique but was scoped instead, similar to container queries (`container-name` property), every element with `anchor-name` would create its own anchor. But then of course what to do with anchors that are not ancestors of an anchored element?

Perhaps it would be possible to introduce a modifier in the anchor selecting syntax, which will select not the first instance of an element with the given anchor name but the closest ancestor?

So, instead of:

```css
anchor-default: --tooltip;
```

we could write:

```css
anchor-default: closest --tooltip;
```

And instead of:

```css
top: anchor(--tooltip);
```

we could write:

```css
top: anchor(closest --tooltip);
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9045 using your GitHub account


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

Received on Saturday, 8 July 2023 11:00:50 UTC