Position-area: Clear and explicit or short and sweet?

This content originally appeared on WebKit and was authored by WebKit

When I first learned anchor positioning, I built a demo to help me figure out how it all worked. I had a goal of what I wanted and I was trying to figure out what properties I needed to make it happen. I had a profile picture, and, when you clicked on it, I wanted a menu to appear below it, but left aligned to the profile picture, like this:

I did some searching, and found that, using logical direction, the code to accomplish this looked like this:

.profile-menu {
  position-anchor: --profile-button;
  position: absolute;
  position-area: block-end span-inline-end;
}

Most of this code is good and fine, but there’s one bit that I found surprising and a bit unclear: span-inline-end. This property conveys a few things. The span tells me that I’m crossing columns and including more than one. Makes sense. The inline-end tells me that one of those columns is the inline-end . Great.

But there’s something missing.

If I’m spanning multiple columns, what’s the other column? Do we start all the way on the left and spanning three columns, or are we starting in the center and spanning just the two? Looking at this property, there’s no way to tell.

I’m wondering if there should be a change to how CSS works, so that, instead, developers would write center-span-inline-end. That spells it out clearly. You start at the center and you span over to inline-end. Every piece of the puzzle is there.

So the code above would be rewritten as this:

.profile-menu {
  position-anchor: --profile-button;
  position: absolute;
  position-area: block-end center-span-inline-end;
}

But with this new property, you get an extra word, making it a bit more verbose. So is that extra word worth the extra clarity to you? Or would you prefer to fill in the blank yourself and keep things concise?

This change to the spec is currently being considered, and we want to know if it’s a change you’d support or if you’d prefer things as they are.

Find me on BlueSky and let me know which you like better.

This content originally appeared on WebKit and was authored by WebKit