v132 · css
Dropdown cascade
Each menu panel uses position: absolute + position-anchor to attach to its trigger. anchor-size(width) in min-width means the dropdown is never narrower than its trigger — no JavaScript measurement needed. Click any menu to open.
Feature detection: checking…
Before: JS getBoundingClientRect
Open event → measure trigger with
getBoundingClientRect() → set dropdown.style.top, dropdown.style.left, dropdown.style.minWidth. Fires on every resize. Breaks during page zoom. Requires scroll-offset math.
After: anchor-size() in min-width
top: anchor(bottom) attaches to the bottom edge. left: anchor(left) aligns left edges. min-width: anchor-size(width) reads the trigger's width. No JS geometry, no resize listeners, no scroll math.
Click a menu to open — dropdowns use anchor-size(width) as their minimum width:
anchor-size(width) values — trigger button widths read by CSS
Open a menu and click an action to see it here.
Event log:
Click a menu to begin.