demo · v131
safe-area margin sized to the anchor
A floater needs a clear breathing margin proportional to its anchor. This demo uses margin-left: calc(anchor-size(--card width) * 0.3), min-width: calc(anchor-size(--card width) * 0.4), and max-width: calc(anchor-size(--card width) * 0.8). Scale the card with the slider — the floater's left margin and width limits follow it.
checking anchor-size() support...
primary action
scaled spacing
card width—
floater computed margin-left—
floater actual / natural width—
floater min / max width—
why proportional spacing
Design systems with large and small button variants used to need media-query-like switches to keep their spacing scaling. anchor-size() in margin-* lets the spacing math live inside one declaration that reads the anchor's actual rendered size.
the api
.floater {
position: absolute;
position-anchor: --card;
left: anchor(right);
margin-left: calc(anchor-size(--card width) * 0.3);
min-width: calc(anchor-size(--card width) * 0.4);
max-width: calc(anchor-size(--card width) * 0.8);
}