v132 · 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() now usable in inset and margin properties, alongside the existing size properties. Lets popovers match the anchor's geometry through layout.

  2. tooltip margin scaling

    Same tooltip rule pinned to three pills of different heights — the gap follows the anchor via margin-top: calc(anchor-size(height) * k).

  3. proportional positioner

    Drag the anchor's width, height, and margin fraction sliders. The badge sits at a chosen fraction of the anchor's width past its right edge — live, with the generated CSS to copy.

  4. axis playground

    Four side-by-side frames showing every axis argument: width, height, self-inline, and the default. A cheat-sheet for picking which one you want.

  5. Dropdown cascade

    A four-item menu bar where each dropdown uses top: anchor(bottom), left: anchor(left), and min-width: anchor-size(width) — the panel is never narrower than its trigger. The "View / Options" trigger is wider than the others, showing how each dropdown tracks its own anchor independently. Compares to the JS getBoundingClientRect() approach.

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