[csswg-drafts] [css-anchor-position-1] A pseudo class for anchor-positioned state? (#9465)

xiaochengh has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-anchor-position-1] A pseudo class for anchor-positioned state? ==
(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

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

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

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

@mfreed7 @una 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9465 using your GitHub account


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

Received on Friday, 13 October 2023 04:38:04 UTC