[css-anchor-position-1] Can we clarify the inset-area syntax? It can be confusing to read and reason about. #9862
Description
Overall, I really like the mental model behind the 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
centerand 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
centervalue becomescenter / allrather thancenter / center center / allis not clear unless you know which axis comes first by default (but not always)left / centerandcenter / leftmean the same thing, butstart / centerandcenter / startare differentbottom centeris not the center of the bottom area, that'sbottom / center(orcenter / bottometc)
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 aspan()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, andself-endresolve to egstart / startandcenter / centeretc. (clarification: This helps with the issue where e.g.centerfirst can mean either axis, butcenteralone always means one specific axis.)
Thoughts?