Overflow management with position-try syntax

[jh3y]

Hey 👋

Been trying the polyfill with a few demos. Any plans to support the new syntax and auto flip values?

https://drafts.csswg.org/css-anchor-position/#position-try-options

[mirisuzanne]

Hi @jh3y - yes, that's the plan. We wanted to wait for the new syntax to solidify some, and I think that's mostly happened. But we could also use help from the community. Code contributions are welcome, as well as financial support (especially from companies that plan to use this in production).

[jamesnw]

Relevant spec- https://drafts.csswg.org/css-anchor-position-1/#fallback

[jamesnw]

In exploring the try-tactics in position-try-options, I'm not seeing a clear way to polyfill that behavior, and wanted to document what I'm seeing.

Adding a try-tactic, for instance flip-inline, automatically creates a position option based on a transformation of the element's specified style. flip-inline would change left: anchor(right) to right:anchor(left).

This specified style may come from anywhere in the cascade. In other places, we are getting a computed style using getComputedStyle(el), but in this case we would need, for instance left: anchor(right), whereas getComputedStyle(el) would give us left: 200px.

To implement try-tactics, we will need to find a way to get all the raw CSS rules (with the cascade resolved) for any element that matches any selector with a try-tactic specified.

[jgerigmeyer]

To implement try-tactics, we will need to find a way to get all the raw CSS rules (with the cascade resolved) for any element that matches any selector with a try-tactic specified.

@jamesnw You're right, this is tricky. 🤔 What if we did something like:

1. Add a CSS custom property to every block where we find an anchor() fn is assigned to an inset property. key: relevant inset property, value: unique uuid, e.g. --top-123: <uuid>
2. When we find a try-tactic, loop through the elements matching that rule's selector.
3. For each element, look for the value of --top-123. Whichever uuid matches, we know which anchor fns are applied?

@mirisuzanne I'm curious if you have ideas here.

[mirisuzanne]

@jgerigmeyer @jamesnw Yeah, the custom property would have been my proposal as well. I don't have any better ideas.