display contents use cases
Hey, what are some use cases for
display: contents;? To me it seems very similar to subgrid but since it comes with the reduced styling consequence, i don't really see any positives for it?
I'd appreciate any help, thanks in advance.13 Replies
I've used it when I've got my content in a
<ul> for semantic reasons, and want to ignore the <li>s & display the contents in a table-like layout.
It could likely be handled with subgrid now, but that's a relatively recent addition.Best use case I've found is to ignore JS framework entry point div. Which Svelte Kit does by default and how I learned of its existence. This can also be the case if you need a wrapper element for some reason but want to remove it as a parent element.
Ah okay yeah I can see how that could make sense, thanks
The entry div being a that id=“root” thingy? And that wrapper one is very relatable for styling reasons haha, so might note that down, thanks
Yup!
That way your first components are looking at body for parent.
i always thought you could remove that tbh
Don't know one that you could, they need an entry point, and putting it right on the body is bad (for reasons I forgot)
<body><div style="display: contents">%sveltekit.body%</div></body> this is what Kit has by default.huh interesting, i didn't know it was bad to put it on the body
GitHub
Require
%sveltekit.body% to not be a direct child of ``? · svelte...The default src/app.html looks like this: <body> <div>%sveltekit.body%</div> </body> The reason for that is articulated in the docs: %sveltekit.body% — the markup for a rend...
Rich goes into the why here, this is not a direct issue just in Svelte though.
I just saw it used on an elementor tabs widget for the mobile view. Don't have a link though but I bet you could find one
Here is one, inspect the tabs and the panels in responsive mode. It uses display: contents https://phparivaca.org/resources
And it just came up in a web dev simplified video
Web Dev Simplified
YouTube
The CSS Display Property is Changing Forever
CSS Simplified Course: https://courses.webdevsimplified.com/css-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-JY0FN71vCbw&utm_campaign=css-course-launch-12-2024&coupon=CSS
The display property has been around since the dawn of CSS, but the purpose of this property has changed drastically since the introduction o...
Oh nice* I just read a blog post of this from Kyle
I skimmed though so maybe video form still help me 😂
Yeah I'm intrigued by it too. I think sometime last year i requested a breakdown in #youtube-topic-suggestions
Feom what I understand it's kind of used on a wrapper you want to act as a phantom. You need the wrapper for whatever reason but you want it children to stay in the normal flow. The link above goes right to the display:content part of the video btw so you won't have to search through it and watching it is the first time I've even kind of understood what it does