[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-anchor-position-1] Anchor-query at-rule? #8585

Open
kizu opened this issue Mar 15, 2023 · 1 comment
Open

[css-anchor-position-1] Anchor-query at-rule? #8585

kizu opened this issue Mar 15, 2023 · 1 comment

Comments

@kizu
Copy link
Member
kizu commented Mar 15, 2023
Disclaimer and additional links

I'm submitting my feedback following my experiments with the current implementation of anchor positioning in Chrome Canary.

I wrote an article about my experiments, but decided to fill most of my feedback as separate issues here.

A quick summary of related links:

We're getting the style queries that allow us to query styles of some pre-defined containers.

In my experiments I often wanted not to use the values of the anchors immediately, but to base some other styles based on the current state of the anchors, especially if we could query multiple anchors and compare their positions/dimensions.

Given the current acceptance criteria kinda guarantees that the anchored element is ~independent of the given anchor, I wonder if some part of this could be used in a way similar with style queries?

Main use-case where this could be used in my experiments — the case where currently we have to use the “four quadrants” technique (https://kizu.dev/anchor-positioning-experiments/#the-technique-itself) — this method is more of a hack, but if we could directly compare the offsets of two anchors, then we could switch things up for our single positioned element which would also have its coordinates using min() (that already works, but without an actual ability to know which coordinate is bigger we cannot do anything else).

Maybe this can be worked around without adding a special anchor-query syntax by allowing using the anchor() and anchor-size() for other properties, but that would mostly lead to having some hacky calculations like

width: clamp(
    min(var(--c-or-d)),
    (anchor(--a left) - anchor(--b left)) * 10000,
    max(var(--c-or-d))
  );

and won't work for non-numeric values.

So, having a proper at-rule here would be really-really cool.

I would create a different issue for using the anchor values for other properties though, as I think it is still helpful, just not exactly for the purpose described in this issue.

Probably related issue about hiding the popovers when they're offscreen — #7758 — I imagine with a certain combination of rules involving the viewport and the offsets it could be possible to detect the conditions for this use case?

@kizu kizu changed the title [css-anchor-1] Anchor-query at-rule? [css-anchor-position-1] Anchor-query at-rule? Nov 25, 2023
@tabatkins
Copy link
Member

(Retagging to level 2, this is a substantial additional feature to discuss.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants