v131 · css

CSS Anchor Positioning: allow anchor-size() in inset and margin Properties

Allow anchor-size() values for inset and margin properties. Originally, anchor-size() was only allowed in sizing properties. The specification was changed to allow anchor-size() in insets and margins as well.

concepts

  1. anchor-size() in inset

    anchor-size() usable in inset/margin properties.

  2. Proportional connector line

    Use anchor-size() inside left and width to draw a connector that scales with its anchor — drag the slider and watch the line and label rescale.

  3. Responsive tooltip offset

    Tooltip gap below an anchor scales to anchor-size(--target height). As the anchor's font-size animates, the offset follows declaratively.

  4. Safe-area margin

    Floater margin and min-width both expressed as a fraction of the anchor's width. The proportional design-system spacing pattern.

  5. Proportional Badge Position

    Notification badges pinned to icon corners using anchor-size() in inset properties. A size slider shows how the badge repositions proportionally while a hardcoded pixel offset drifts off-corner.

  6. Sidebar Mirror

    An info panel that mirrors its sidebar's height with min-height: anchor-size(height) and clears the sidebar's right edge with margin-left: anchor-size(width) — combining sizing and margin usage of anchor-size().

why it shipped

Allow anchor-size() values for inset and margin properties. Originally, anchor-size() was only allowed in sizing properties. The specification was changed to allow anchor-size() in insets and margins as well.

references