[csswg-drafts] [css-anchor] Implicit anchors in fallback to enable reuse (#8104)

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

== [css-anchor] Implicit anchors in fallback to enable reuse ==
Currently, [position fallback](https://w3c.github.io/csswg-drafts/css-anchor/#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:

```css
.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:

```css
.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.

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


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

Received on Friday, 18 November 2022 22:38:29 UTC