> Quick question: how many of these have you actively used in production? > Cont...

bobthepanda · 2024-05-27T00:19:34 1716769174

i actually came up with a thing where subgrid would be useful, since subgrid lets you denote that a child wants to use the same grid as the parent.

if you wanted to use grid template areas, and you had something that looked like

   <div id="my parent grid">
       <h1>Title</h1>
       <ul>
         <li />
         <li />
       </ul>
   </div>

There isn't a great way to make the <li> adhere to the grid template areas, because without subgrids only direct children (the ul) have coordinate attributes.

noduerme · 2024-05-27T01:00:55 1716771655

I haven't needed to do CSS grids for awhile, but couldn't this have already been done with `display:contents` ?

bobthepanda · 2024-05-27T03:09:39 1716779379

TIL about display:contents. I’ll have to check it out but it sounds like it does: https://bengammon.co.uk/css-grid-and-display-contents/

Subgrid lets you do it for anything more involved or deeper though.

noduerme · 2024-05-27T05:09:35 1716786575

I think subgrid might give you a freer hand. Because if I remember correctly, the trouble with display:contents is that no other styles you put on that element will affect elements within it. This means shifting all styles down a node, which can be a real pain and have knock-on effects.

yurishimo · 2024-05-27T05:37:07 1716788227

`display: contents` has a11y concerns in a lot of scenarios. The `ul` will be hidden from a screenreader and it will be read as `h1, li, li, li...` etc.

It's a neat hack, but it's still a hack.

richrichardsson · 2024-05-27T08:17:52 1716797872

After having seen a11y written about 100x times in Svelte warnings, it's finally dawned on me that it means accessibility, which is somewhat ironic that I had no idea what it meant all those times before.

yurishimo · 2024-05-27T08:25:08 1716798308

Please don't take this the wrong way, but can I ask how you personally find answers to similar solutions when they come up in your work/personal life?

The first thing I do when I see an acronym or word I don't understand is go to Google and type `what is a11y webdev` or whatever. I think you get the idea.

This has been a part of my life for almost 2 decades now so I'm curious how others handle the situation! What made you wait so long to find the answer? Did you eventually search for it, or did you finally read some document that spelled it out explicitly?

Again, genuinely curious! I assume many people operate like I do and there is a line between explaining too little and too much. Understanding how others approach these problems hopefully will help me improve my own communication in the long run.

richrichardsson · 2024-05-28T08:16:52 1716884212

I would normally do something similar. The context in which I was seeing these warnings was that I was working on a new UI for a VST plugin using web front-end tech, something novel for me so I was more interested in getting it to work before dealing with what the warnings meant.

It was the parent comment mentioning a11y and screen-reader in conjunction that made me make the connection, I just found it hilarious that the term a11y itself is so inaccessible if you don't already know what it means!

azangru · 2024-05-27T14:08:58 1716818938

> But I might be willing to make an exception for people who write CSS that requires you to read the MDN article on Specificity to understand it.

May I ask you, are you a front-end developer?

kerkeslager · 2024-05-28T00:42:31 1716856951

Full stack. Typically Django+React, using React as a component library not an SPA framework. But I've worked on stacks that deviate from that pretty significantly in the not-too-distant past.