[css-anchor] Implicit anchors in fallback to enable reuse

[tabatkins]

Currently, position fallback just applies some positioning properties directly from the @try blocks. This means that if your element currently anchors to a --foo anchor, with your normal positioning written like top: anchor(--foo bottom);, you have to write it out similarly in your fallbacks as like top: auto; bottom: anchor(--foo top);.

This is fine and easy to understand for unique anchoring styles applied to a single element on the page, but is extremely cumbersome when you're applying the same fallback behavior to many elements on the page (a whole bunch of tooltips, for example). Each one ends up needing a unique @position-fallback block which is exactly identical except for the anchor name in the anchor() functions.

I propose that we allow the position-fallback property to additionally specify an anchor name, and any anchor() function using the "implicit anchor element" (omitted anchor name) feature in the @try blocks uses the specified anchor name.

That is, you can write something like:

.foo-popup {
  bottom: anchor(--foo top);
  position-fallback: --flip-to-bottom --foo;
}

.bar-popup {
  bottom: anchor(--foo top);
  position-fallback: --flip-to-bottom --bar;
}

@position-fallback --flip-to-bottom {
  @try {
    bottom: auto;
    top: anchor(bottom); // refers to --foo or --bar, depending
  }
}

---

Approaching the same problem slightly differently, perhaps we want to generalize and give a way to explicitly specify how the implicit anchor element is resolved? That would allow even more style sharing, like:

.popup {
  bottom: anchor(top); // refers to --foo or --bar, depending
  position-fallback: --flip-to-bottom;
}

.foo-popup {
  anchor-default: --foo;
}
.bar-popup {
  anchor-default: --bar;
}

anchor-default would also let you refer explicitly to other sources of implicit anchors, so you could switch between them. (Currently only the Popover API provides such, but there's always the possibility of more.) So a grammar like:

none | auto | popover | <<dashed-ident>>

With auto being the initial value, with a well-defined ordering in the spec for deciding which source of implicit anchor elements to choose.

[tabatkins]

Fixed in 530c6e1. I went with the final approach in my comment - if you omit the anchor name, it'll now take the anchor target from the 'anchor-default' property, which has the same value space as the anchor function itself.

[xiaochengh]

How about removing the popover keyword? The implicit keyword already does it all.

Also we probably don't want to add another keyword if another spec (like selectmenu) also defines an implicit anchor.

[tabatkins]

My intention is that we will add another keyword, indeed, so you can select which implicit anchor to use, just in case your element defines several.

I can remove it if we think that elements will never really run into this situation and just rely on "implicit", tho.

[xiaochengh]

I still think we should remove it.

As we only allow one implicit anchor element, the implicit keyword is already enough.

And I don't think we should ever allow multiple anchor elements defined by multiple specs.

The only concern is that we are now leaving the responsibility of not redefining implicit anchor element to the other specs, which means there will be an inter-connecting dependency between them. But maybe this is not a big issue at such an early stage.

[xiaochengh]

Btw anchor-scroll should also be able to use the default anchor

[tabatkins]

Okay, removed popover. If we do need to extend the set of possible implicit anchors, we can do that in the future; there's no need to make it generic right now.