Rob's garden / notes / note

Note

Got a nice popover working for icons using CSS Anchor positioning!

You do it like this in #CSS

button {
  anchor-name: --my-anchor;
}
.menu[popover="auto"] {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: bottom;
  position-visibility: always;
  position-try-fallbacks: flip-block, flip-inline;
}

I'm not entirely sure what all the parameters do yet, I need to dive into why it works next!

It should probably be queried for too

@supports (anchor-name: --anchor) { ... }

Screen recording showing a double-click on an icon in a menu that triggers a popup menu that you can change the icon for the thing with