Re: [csswg-drafts] [css-anchor-1] Area-specific styling (#9332)

So even if you have something like this: 

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

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

-- 
GitHub Notification of comment by jpzwarte
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9332#issuecomment-2607237229 using your GitHub account


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

Received on Wednesday, 22 January 2025 13:21:41 UTC