[css-anchor-1] Area-specific styling

[fantasai]

There are a number of things an author might want to change depending on which fallback position an anchor-positioned element lands in. Accommodating tethers is just one example, e.g. you might want a background gradient drawing outward from the anchor or other effects. We might not want this right away, but we probably want it eventually, so we should design a system that can easily accommodate it.

The current proposal uses a limited set of properties inside the @try blocks. In theory this list could be expanded. But

• the more styling we allow, the more awkward this becomes, since the author can't organize their styles in more sophisticated ways
• the more styling we allow, the worse the cascade problem becomes

Note: It's not totally worked out in Apple's proposal, but the fact that each fallback position can be identified and selected against lays out a path for extending styling as far as we want to go in the future.

[kizu]

The more I thought about it, the more, in my opinion, something container-query-like could be the best.

If children of an absolutely positioned element could query that element's position, we would be able to style them in any way we'd want (we'd need to have some containment on the element, though, I imagine? Which is usually ok for absolutely positioned elements).

This way, we could cover both area-specific styling and a more low-level anchor positioning if we somehow query any anchors' values:

1. If we have area-specific styling with or without fallbacks, we could query which quadrant(s) our element is currently positioned into. Something like “is our popover in its block-start position?” or “is it in both block-start and inline-end”?

2. If we have regular absolute positioning with anchors, what I'd want to test is something like “is inset-block-start of element1 smaller than inset-block-start of element2?”, basically, manually querying anchor() and anchor-size() and comparing them.

The main limitation of this is that we would have to have the containment on our absolutely positioned element, so the styles of children won't affect the positioning, so if we'd want our popover to visually collapse to content, that would have to happen on an element inside our popover, which can be a bit cumbersome. Unless we'd find a way to make it just work in some way?

[una]

I was imagining that we could use state queries for this and target the current position name (i.e. in current spec, the named @try block`)

[jpzwarte]

So even if you have something like this:

<button popovertarget="popover">Button</button>
<div id="popover" popover>
  <div class="tether"></div>
  <p>Popover content</p>
</div>

button {
  anchor-name: --button;
}

[popover] {
  container-type: position-state;
  position-anchor: --button;
  position-area: bottom;
  position-try-fallbacks: flip-block;

  .tether {
    position: absolute;

    @container position-state(anchor: bottom) {
      inset-block-start: 0;
      /**
        * Calculate the offset of the tether from the left of the popover:
        * offset = <anchor-position-left> - <popover-position-left> + <anchor-width> / 2
        */        
      inset-inline-start: ...;
    }
  }
}

The hard part is still unsolved: assuming you have a non-centered positioned element, you need to calculate the offset of the tether.

Questions:

• We have an anchor-size() function, but can we even call this from a child of the positioned element?
• Can we use anchor(left) to get the left position of the anchor?
• If both answers are yes, then we still need to know the left position of the popover?

Or is there an easier way i'm not seeing?