W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2019

Re: [csswg-drafts] [css-grid] grid area as element (#4416)

From: WebMechanic via GitHub <sysbot+gh@w3.org>
Date: Sat, 12 Oct 2019 15:32:55 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-541335440-1570894374-sysbot+gh@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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:54 UTC