[css-anchor-position-1] A pseudo class for anchor-positioned state?

[xiaochengh]

(Related Chrome bug: https://crbug.com/1394481)

I'm wondering if a pseudo class that selects anchor-positioned elements is going to be useful. Or maybe weird.

The main motivation is to make popover styling easier. Right now popovers have a UA style sheet like

[popover] {
  position: fixed;
  inset: 0;
  margin: auto;
}

[popover][anchor] {
  inset: auto;
}

The first part makes popovers centered in the viewport by default. And to make them easier to work with anchor positioned, the second part resets insets to auto if they are supposed to be anchor-positioned, indicated by the HTML anchor attribute.

However, this means that if we set a popover's anchor with the anchor-default property instead of the HTML attribute, we will also need to manually reset its insets to auto -- which isn't obvious to discover, and breaks my mental model of HTML anchor attribute and CSS anchor-default property are equivalent.

If we have a pseudo class selector, then we can turn the second part into

[popover]:anchor-positioned {
  inset: auto;
}

And authors can use anchor-default without having to reset the insets.

@mfreed7 @una

[kizu]

I think that pseudo-class could look weird, I'm not sure if there can be other use cases for it, and if could be weird in a sense that what if we'd override the anchor-default within it?

My first idea for this was something like: could we always set the inset: auto, but override the auto to be something “if the element is in the overlay, and does not have an associated anchor, it resolves to 0”?

What would be the downsides of something like that?

[xiaochengh]

and if could be weird in a sense that what if we'd override the anchor-default within it?

Right. That would make it super weird. So a pseudo class is probably not a working idea.

My first idea for this was something like: could we always set the inset: auto, but override the auto to be something “if the element is in the overlay, and does not have an associated anchor, it resolves to 0”?

That would be ideal, but we need a more detailed solution here.

[bleper]

Isn't this covered by style container queries? Like this:

[popover] {  
  @container not style(anchor-default : initial) {  
    inset : auto;
   }
}

[kizu]

Isn't this covered by style container queries? Like this:

Similar to regular container queries we couldn't modify the element itself with them, only nested ones (for the same circularity reason).

[yisibl]

When I first tried to combine a CSS anchor with a popover, the popover was not anchored as I expected when the anchor property was not present.

I later realized that the addition of the anchor property worked as expected because of the UA's default style [popover][anchor] { inset: auto; }. This was confusing.