Re: [csswg-drafts] [css-anchor-position][other] Handling popover default styles (#10258)

Okay, @fantasai and I are giving this issue another shot, because it continues to be a constant souce of confusion for authors, even very experienced ones. See e.g. https://github.com/w3c/csswg-drafts/issues/12466

Recapping the issue:

* The [HTML UA stylesheet](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3) for `[popover]` defaults to styling the element in a “non-anchored” way - it's fixpos and centered on the screen. This is perfectly fine as a default.
* The popover API also gives the popover element an implicit anchor element, so anchor positioning can work. But when authors try to use that, by setting `position-area: bottom span-left` or something, *it doesn't work*. This is because the “centered fixpos” styles don't play nicely with anchorpos styling and defaults. To get things to work, authors have to remember to *unset* margins back to `0`.

Our goal is to square this circle, and make it so that authors doing the *intuitive* thing get the *intuitive* result, if possible. We think we've hit on a solution.

## Proposal ##

Add a new `dialog` value to `align/justify-self`. (Better name potentially TBD, but we think this one could work as-is.) This value responds to `position-area`: if `position-area` is set to a non-`none` value, it resolves just like `align/justify-self:normal`. But if `position-area` is `none` (initial value), then it triggers the `position-area` *additional behavior* (resolving auto insets to `0`, etc), but acts like `align/justify-self: center`. (The `normal` value already responds to `position-area`, so this dependency has strong precedent.)

The HTML UA stylesheet can then simplify, replacing all the sizing/aligning properties for popovers:
    
```css
[popover] {
  position: fixed;
  place-self: dialog; /* new */
  /* deleted
  X inset: 0;
  X width: fit-content;
  X height: fit-content;
  X margin: auto;
  */
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}
```

By default, this centers the element in the viewport and sizes it to its content, as today. If an author sets `position-area`, tho, it'll automatically work as expected - `position-area: bottom span-right;` will “attach” it to the popover invoker.

This also handles some other cases more elegantly, we think. For example, an author setting `place-self: stretch` today would also not see any effect, because the default styles explicitly set `width` and `height`; after this change, it'll actually stretch.

An alternative we considered was a new value for `position-area` which would behave just like `span-all` except resolving `normal` alignment to `center` instead of `anchor-center`. Both options would get us similar behavior, but this felt more like an alignment problem than a `position-area` problem.

CC @kizu @jakearchibald

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


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

Received on Monday, 21 July 2025 21:43:28 UTC