[csswg-drafts] [css-anchor-position-1] Can we clarify the `inset-area` syntax? It can be confusing to read and reason about. (#9862)

mirisuzanne has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-anchor-position-1] Can we clarify the `inset-area` syntax? It can be confusing to read and reason about. ==
Overall, I really like the mental model behind the [inset-area](https://drafts.csswg.org/css-anchor-position-1/#inset-area) property, as a quick way to set relative insets. But looking at the syntax today with @una, there were a few aspects of the syntax that make it hard to read and reason about. In my mind the primary issue is the overlap between:

- two axis values, which can be listed in either order
- two values _within an axis_ for spanning multiple areas
- for `center` and the logical values, names are the same on either axis
- for single values, the implied axis is `all` 
 
That leads to some interesting situations: 

- simple `center` value becomes `center / all` rather than `center / center`
- `center / all` is not clear unless you know which axis comes first by default (but not always)
- `left / center` and `center / left` mean the same thing, but `start / center` and `center / start` are different
- `bottom center` is not the center of the bottom area, that's `bottom / center` (or `center / bottom` etc)

There's two changes that I think would help, while leaving some flexibility:

- Clarify spans with a function syntax (`span(left, center)`). This would reduce the top-level space to two values without needing the `/` divider. (It might also be useful for grid to support a `span()` function for spanning multiple grid areas.)
- I expected single axis-ambiguous values to duplicate for the cross-axis: so that the bare keywords `start`, `end`, `center`, `self-start`, and `self-end` resolve to eg `start / start` and `center / center` etc.

Thoughts?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9862 using your GitHub account


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

Received on Thursday, 25 January 2024 22:40:47 UTC