search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.35k stars 641 forks source link

[anchor-position] CSS anchor position gap #10396

Open zanina-yassine opened 4 weeks ago

zanina-yassine commented 4 weeks ago

After a short Q&A with Tab Atkins-Bittner we discussed the possibility of adding anchor-position-gap to elegantly add space between the anchor and the element attached to it

proposition to the property name anchor-gap

astearns commented 4 weeks ago

I expect this should be adding a gap between the element and its anchor(s), the same gap if more than one anchor is being used

zanina-yassine commented 4 weeks ago

The thought of multiple anchored elements also popped in my head but since this is a concept I would assume the CSSWG would find a more fitting way and possibly take into consideration all possible scenarios when using the anchor-postion

kbrilla commented 4 weeks ago

Few question:

  1. Will it be placed on the anchor element or anchored element?
  2. I can imagine that someone will have few anchored elements that want different gaps.
  3. Gap should be defined in inline/block axis. Whats more maybe even start/end as well.
  4. I suppose it should work for the inset-area image
kbrilla commented 4 weeks ago
  1. Maybe anchor() function could be passed gap for more precise placement without worrying about adding or subtracting to create gap between anchor and anchored element.
  2. Will anchor-size() include gap or not?
  3. Adding to anchor() will allow for different gaps for different anchored elements and anchors (like one element anchored between two elements with different gaps, and second popover just anchored to one element and with yet another gap'
zanina-yassine commented 4 weeks ago

I would lean towards adding the gap to the element attached to the anchor, that way we can use gaps the same way we use it with grid and flex layout

As for the anchor function anchor() that might be a great idea

kizu commented 3 weeks ago

I would lean towards adding the gap to the element attached to the anchor, that way we can use gaps the same way we use it with grid and flex layout

If so, is there a reason a margin does not work for this? https://codepen.io/kizu/pen/dyEzjpZ Here the margin is defined only on one side, and when the position-try-options flip the element, the margins are also flipped. And for anchor() we can already use calculations to adjust its value when necessary.

Thinking about it: having the anchor-gap or anchor-margin on the element itself could be more useful, as it will achieve something a property on the attached element can't: define a minimum margin between the anchor and anything that wants to be attached to it.