Re: [csswg-drafts] [css-anchor-1] Allow anchoring to a particular grid area of the target element (#8898)

The latest use-case that I can remember — the sidenotes layout. Something like [one of my experiments](https://kizu.dev/anchor-positioning-experiments/#sidenotes-layout).

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: 

https://github.com/w3c/csswg-drafts/assets/177485/f6f2f152-f6fb-431a-b725-e581fcb6663e

* * *

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](https://kizu.dev/anchor-positioning-experiments/#tables) would be possible:

https://github.com/w3c/csswg-drafts/assets/177485/ff281395-85ca-4738-987b-6541b5f0c8ee

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-name`s 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.

-- 
GitHub Notification of comment by kizu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8898#issuecomment-1572664076 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 1 June 2023 19:36:13 UTC