- From: Mayank via GitHub <sysbot+gh@w3.org>
- Date: Tue, 11 Mar 2025 11:12:37 +0000
- To: public-css-archive@w3.org
mayank99 has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-anchor-position] Matching the anchor's `border-radius`, `background`, etc == ### Problem and use case Currently, the `anchor-size()` function allows an anchor-positioned element to match the anchor element's dimensions. It would be useful to have the ability to match more than just dimensions, e.g. shape and other visuals. The two properties that I'm particularly interested include: - `border-radius` - `background` (or at least `color-scheme`) These are not difficult to match manually for one-off elements, but sometimes I want to build a highly-adaptive anchor-positioned element which needs to work with many different anchors (all of which may have different visuals). My current use-case is **anchored focus rings** (see [CodePen demo](https://codepen.io/hi_mayank/pen/MWNrBpQ)). ### API ideas This could be exposed as a new function for shape-related properties? (What other properties would be desirable to match?) ```css border-radius: anchor-shape(); ``` More ambitious: what if there was a more generic function to match any arbitrary properties? ```css background-color: anchor-property(background-color); ``` If there are concerns with matching all 500+ properties, maybe we could start with just custom properties? ```css border-radius: anchor-property(--border-radius); ``` Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11906 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 11 March 2025 11:12:38 UTC