- From: WebMechanic via GitHub <sysbot+gh@w3.org>
- Date: Sat, 12 Oct 2019 15:32:55 +0000
- To: public-css-archive@w3.org
Love it :) > @chvndb Again, I do not know if this even technically possible [...] Being able to use **decoration** properties such as backgrounds and borders for _virtual_ grid area elements should be interesting and would also reduce wrapper polution. My guess is it could be "technically possible" to insert a virtual "grid area element" just like `display:table-cell` implicitely creates a virtual table element to contain it that also appears in the accessibility tree and `display:contents` doing the opposite. However, this virtual table element is not stylable as well (afaik), i.e. there's no _parent element selector_ (yet) or some `:table()` pseudo-class to travel up the (shadow?) tree. Your proposed syntax using `.grid[area='content']` is already taken by the attribute selector and would match any "physical" element such as `<foo area="content">`. Off the top of my head I'd suggest some variation of `:grid-item()` -- and maybe `:flex-item()` too while we're at it :) ```css /* a.) any grid item in any grid */ :grid-item() { } /* b.) item(s) in grid-area areaname */ header:grid-item(areaname) { } /* c.) item spanning the specified tracks: row-start / row-end / col-start / col-end */ .mygrid:grid-item( 1 / span 2 / content-start / -1) { } ``` Using `<integer>`, `<custom-ident>` and `span` would be in line with `grid-area`, `grid-row` and `grid-column`. If combined with other pseudo-classes magic things could happen. ```css :grid-item():nth-child(even) { background:white } :grid-item():nth-child(odd) { background:black } :grid-item():last-child { } ``` Dealing with gaps/gutters might be challenging as well as defining inheritance to and from these areas or formatting contexts, directionality ... dragons! Maybe something along `box-sizing:gutter-box|track-box|item-box` could help whether to collapse or skip over the gaps to draw backgrounds or borders and to compute the size of the specified area for sth. like `display:flex`. my 2.5ct -- GitHub Notification of comment by WebMechanic Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4416#issuecomment-541335440 using your GitHub account
Received on Saturday, 12 October 2019 15:32:57 UTC