[css-anchor-position-1] Allow anchoring to a particular grid area of the target element

[kizu]

Read #7661 issue and noticed @tabatkins saying

Also, I think that in general everything people want to achieve with static positioning is achieved better, easier, and more reliably with anchor positioning.

My issue here would be — I don't think an anchored element, currently, has an access to the grid of an element it would be positioned into? In order to utilize the grid with anchor positioning, right now we would need to have actual elements in the grid that we could then use as the target.

But what if we could target specific grid areas?

There are other cases where we could want to “specify” in more details what exactly we're targeting when selecting an anchor, for example, I agree that we would want an ability to target a particular fragment (#8895).

What if we could introduce a new function like grid-area() that could be used for this?

anchor(--foo grid-area(content) center);
anchor(--bar grid-area(1 / span 2) start);

This way, for a particular anchor, we would first find the element that is associated with it, then would check if it is a grid, and if so, would try to find the area by the same syntax grid-area uses.

Alternative considered for a second: using the grid-area property itself when the anchor is active, but this won't really work as we could want to have multiple anchors with different grids.

[bfgeek]

It'd be good to have some use-cases for specifying a grid area vs. an element.

Ian

[kizu]

The latest use-case that I can remember — the sidenotes layout. Something like one of my experiments.

Here is a quick CodePen: https://codepen.io/kizu/pen/abRebRJ?editors=1100

In it, I have a grid, with some number of columns, and elements going vertically in one of them. Then, I want to be able to position things absolutely with anchors, where:

1. Horizontal position should be based on the “aside” column defined in the grid. Without an ability to target a grid column I cannot do this, so I have to place a placeholder element there with an anchor-name which substitutes for such a grid area.
2. Vertically, I want to position an element choosing between the max of either the corresponding paragraph, or previous similarly positioned element. Second part here is easy due to the recent change, but for the first part I need to explicitly set variables both on the paragraph and on the positioned element. With an ability to target specific grid areas, I could only count the paragraph and put the row index as a variable on the positioned element, as I could then place it on the corresponding place.

Here is a video of how this behaves:

Screen.Recording.2023-06-01.at.21.28.18.mov

---

Another similar case could be used potentially for something like tables (with the condition that they're implemented using CSS grids instead of table layout; I'll put aside the potential accessibility issues that can bring, let's imagine all browsers would solve this eventually). Then, something like my other experiment would be possible:

anchor-positioning-1-3.mp4

In the video we can see that we could select different rows/column and areas of a table — if the table was implemented with a grid, and we had an ability to target an area with anchor positioning, this would be trivial. But right now in my experiment I have to explicitly add anchor-names on elements in each column and row, just so I could target them later.

---

If I'll remember other cases related to this, I'll add them.

[kizu]

Another, very use-case idea — placing decorative elements onto the grid gaps or over whole columns/rows when the elements inside of them have different sizes.

CodePen: https://codepen.io/kizu/pen/abRezzL

Video:

Screen.Recording.2023-06-01.at.22.19.15.mov

In the example I had to add an anchor-name for every element, and then use max or min to select the proper side of each “row” or “column”.

When the sizes of elements inside could be different, it can be very hard to select the proper ones. And what if the grid is not static and wraps?

Having an ability to use grid areas as targets for our anchors could be really nice in this case, as we would be able to first choose a row, column or an area, and then choose its side — allowing placing things both inside the cells, and outside, on the gaps.

[tabatkins]

On the other hand, if we solve the "decorative grid items pseudo-element" problem, we can lean on that instead of trying to solve this within anchor(). I think I'd prefer that.

[kizu]

Is there any draft for the specs for it/an idea of how it could look? If this (or those) pseudo-elements could have anchor-names, and you could have an arbitrary number of them, then I'd agree (otherwise it won't work for the general “we want to draw a selection over N arbitrary item groups”).

[tabatkins]

Not yet, but I've got a proposal simmering that I'll post later this month that addresses it.

[Loirooriol]

For decorating gaps, there was this proposal: https://matspalmgren.github.io/css-gap-decorations/Overview.html

And for decorative grid item pseudo-elements, #499

[tabatkins]

Yeah my proposal will solve #499 in a slightly different way.