Funny story. A few days ago I was working on an ugly project, and my job was to style it, without changing the structure. And I had some P tag with icon, text (without wrapper tag), and link inside. And they want to get a grid from it with two rows, two columns, an icon to span with two rows... I was breaking my head, and I gave up in the end. Usually, I can change the structure, and fix it, but here I was stuck. A couple of hours later, while I was having dinner, I turned on youtube on my mobile, and your video was the first one. And the video was about the same problem that I had :D I have 15+ years of CSS experience, and I never had a problem like this, and at the same day, I got recommended video with a solution for my problem :D
This happens to me all the time! I’ll be working on something, getting stuck and KPow drops a video that relates perfectly to my problem. It’s so serendipitous!!
Wow I've only just realized he says front-end friends in the beginning. I always thought he said friend and friends which, admittedly, is weird, but I don't know every saying, so yeah, that happened
🤯 I always thought he was saying “friend and friends” as well. I thought it was neat actually. Like, saying hello to me specifically and then everyone else.
Mind blown! It has always been a sort of affirmation for me. Like the scene from that old show Touched by An Angel where the actress looks into the camera and says in that rich Irish accent, "God loves you". I pretended it was directed at me, like I am the friend and everyone else is friends. Life has less meaning now. Hahaha! Still great content and the hoodie is awesome too from the merch below!
I stopped the video at 08:56 to get a single frame and talk about math. It's natural to put variables first and then numbers, like (n + 4) or (-n + 3). But you could agree that -just listening to your own explanation, you could understand it easier just tweaking the formulas this way: a) count starting from the 4th element till the end (4 + n) as you explain at 08:04 or, b) start at the third position and go backward to the beginning (3 - n). And thanks for another awesome explanation!!
A good use-case for this with grids, is when you need to support graceful degradation... If a browser (like Opera Mini) doesn't support grid, you'll likely want to have a lot more wrappers for elements, but, using those wrappers in the HTML will break your grid layout. Enter `display: contents;` to the rescue... Now you can support your basic, functional layout with boring wrappers, but in browsers that support `display: contents;` (which is most places that grid is supported, except for IE), you'll still have your nice grid layout available.
I use display contents all the time to get rid of unnecessary (for styling purposes at least) elements an get items onto my grid or flex kebab. Sometimes on multiple levels to really unwrap something nested deeply!
For some use cases you may want to work with subgrid instead. Unfortunately, the only browser currently supporting it is Firefox, though, but it seems it'll come to Chrome and Safari soon, too.
Oooooh, I already imagine it to be useful for the combo of ::after and display: contents - like those separators you see in the menus! This is incredible.
I mosttly use display:contents to posthumously fix horrible DOM lol. I find people who aren't as passionate about UI tend to wrap things in too many containers while they're wrangling layout. It's also handy for component-based JS frameworks like Angular which wrap every component in a custom container. With display:contents you can free the contents of the component back out into the main flow.
I was having trouble with this just now! I came to TH-cam to watch your videos obout grid to find my way around the problem, and find this video on my feed! Kevin you're God 🤣
Hey Kevin. A lot of times we need to refer back to your videos to find something we've watched before - especially is sending them to others. Can you keep this in mind when setting your video titles? "A powerful CSS display property that no one talks about" gives me no hint in a month's time what it involved, to jog my memory.
This makes a lot of sense for viewers, but unfortunately not for content creators. Interesting titles are key to generating views. Check out Veritasium's great video on this topic.
I must tell this solved me sometime headaches! Well, maybe not that much, but enough to find it cool and as always, thank you for all you do! I wanted to use a Button component I had made with the semantic of a link tag, I couldn't just change to a "a" tag, I would need to style everything again, and also I had the button with another button in a flex container, which embracing the button with the tag broke the 50/50 flow. So I just threw the "display: contents" in the a tag and it came back to the way I wanted it to be! *Noice*👌
I've noticed that the way text gets placed when using display content in a flex box doesn't always behave as expected. Even in your example, it appears like the text's basline is lost/changed. It is very easy to see if you compare the vertical position of the logo with the rest of the links between 5:30 and 9:20 . Can you elaborate a bit on this?
In this specific case (see Kevin's Codepen at codepen.io/kevinpowell/pen/dyJRJjO). The reason for the misalignment is that the s have a bigger font size and line height than the logo. The issue is unrelated to display: contents. In flexbox layout, the flex items get stretched by default and the text is placed at the top of the element. To fix that, you can apply an align-items: center to the flex container to center them or align-items: baseline to align them on their common baseline. See developer.mozilla.org/en-US/docs/Web/CSS/align-items for more info on that. Another point you need to consider using display: contents, which Kevin mentions in his video, is that it causes the element not to generate a box. That means that layout related properties like margin, border or padding have no effect on it. So if they only contain text, you won't be able to change its layout, only its style like font-size, color, etc.
2 ปีที่แล้ว
@@SebastianZartner The link does not work and throws a 404 error.
Really interesting content, as always! It's a bit challenging to use but I do like it! About the flex order you could make use of tab-index (on clickable elements) to deal with it, don't you?
Probably the main reason this was/is not used, is very likely MSIE -- as always. There have also been implementation bugs in evergreen browsers for years that resulted in severe a11y issues with the element being virtually "ripped" from the DOM. This property fundamentally changes how markup structure and css work together and there is no trivial fallback or workaround in CSS that can be used. I would've loved to use this years ago for every other grid structure, but this property came with too much trouble and requires extra work to make both IE users *and screen readers* happy. AFAIK the a11y issues have been solved by now, and with IE being officially dead, we can try to use this on sites where IE users are virtually non existent, so as always: check your logs and analytics first.
Kevin, I am just learning css with grid, flex etc. What makes it useful for me watching your videos is when you put ALL your code up, like on codepen. I can then fork it and start playing with your code, making changes and seeing how those changes effect the the outcome and adding my site coding. I am presently watching this and adding your code to VSC... however, since my css is slowly coming together I am missing the code you pre-made in your css file... body etc. SO, I'm not seeing what you are showing as far as all the css formatting. Maybe I'm dyslectic, not really sure, but I've always done better by visual learning as apposed to reading. So, in this case I like to grab html and css files and just start making a change and then looking at the browser to see that change. Crazy, I know, but that's how I learn. I have a bunch of websites that I started for friends years ago that I am now looking to update with things like grid, flex, animation using transform and transition etc etc. I see a great navbar on the web so I start googling how to do it... I always wind up watching your TH-cam channel. All those sites I designed never used any CSS. I used Dreamweaver. Anywho, I'm starting to babble. Geez, was there a ? in there somewhere?
Very interesting . Thank you. Do you think that footnotes would be good use-case for this as well? For example a text where footnotes tags are within but rather should be displayed visually bellow the text?
I have a question. You said Mozilla had fixed the bug, at 10:35 in the video, and it happened a few days ago. How do you have access to this news? There is some news letter or you consult it by searching? And the last one. Where can I get more advanced stuff on the web, beyond you channel of course? Thanks again.
I follow the bug reports on some things, so I get emails as they're fixed. You can Google the name of the feature and "bug report" and find them for all the browsers.
Kevin, I have a question. when I have my grid-template-area setup, different cells with different content widths get different alignments and justifications. And I'm not able to impose a rule from the parent (while using grid-area) for all children with different content widths to look the same. This is absolutely possible using grid-template-columns. could you make a video and explain how are we able to do so with grid-area only?
You can definitely specify cell sizes directly with grid-template-areas. grid-template-areas: "a b" 1fr "c d" 1fr / 1fr 1fr; This will make both columns the same width and both rows the same height.
Once I asked about this property on stackoverflow and someone pointed me out that this property has some real issues about a11y depending screen readers, do you know something about this? And still safari is not supporting this fully so writing some workarounds for this one is really painful
Found this out while trying to include a button in a paragraph, but have its text wrap with the paragraph text. If y'all have a better solution for this, please let me know
What happened to all the smooshing? Not much going on any more! 🤣🤣 I've been doing loads of grid/flex stuff lately to get text beside images, so will give this a go! Thank you.
That's a very good point! Creating a website, you should always be backwards compatible. I'd really like to see Kevin emphasize that and show how to work around unsupported features. I imagine, for display: contents it'll be very hard to create a proper way of displaying your contents for browsers that don't support it.
Awww, I used nth of type for re-ordering items in a flex layout recently and didn't realise until this video that it causes accessibility issues 🤦🏻♀️ It kinda feels dangerous that re-ordering is bso easy given this downfall.
The problem with forms is it really depends on the tech stack your using. I could look at a simple way to do it though, it just might not be the best solution for everyone... maybe I could look at 2 or 3 🤔
@@hughclarke8504 HTML is the markup of your frontend page. Sending emails happens on the server. Technically, you could use anchor element with email href but that will use the default email client of the user.
My answer for the introduction was. I absolutely never heard about what you mean, fuck I'm totally confused, I want to quit. But in the end I got what you mean.
Sort of, but it's not really the same thing. It would be really similar though, but there are a few good posts out there about how it's not really a replacement for it. Considering subgrid looks like it'll have full support in the coming months anyway, I'd just hold off, as support for this and subgrid aren't going to be very different.
The main difference is that subgrid still renders it's own box, useful for background colours etc.. subgrid also doesn't have to inherit the entire grid definition, while this just dumps everything into the parent. You can however achieve most of subgrid using contents, (partial) inherit on grid template and custom properties
yet another thing how to confuse most of the web devs (co-workers on the project), I see the benefit, but on the other hand, why would we make our styles more complex when there are other ways that everyone can understand (+have better browser support)
display: contens is simply opposite to make display: block. In the first example (if u could edit HTML) changing block into inline would result the same :) Great trick.
This is really cool, but I do think you're being overly optimistic about being able to use this already. As a general rule I think it would be good to include a caniuse type visual at the start of this kind of video.
Funny story. A few days ago I was working on an ugly project, and my job was to style it, without changing the structure. And I had some P tag with icon, text (without wrapper tag), and link inside.
And they want to get a grid from it with two rows, two columns, an icon to span with two rows...
I was breaking my head, and I gave up in the end. Usually, I can change the structure, and fix it, but here I was stuck.
A couple of hours later, while I was having dinner, I turned on youtube on my mobile, and your video was the first one. And the video was about the same problem that I had :D
I have 15+ years of CSS experience, and I never had a problem like this, and at the same day, I got recommended video with a solution for my problem :D
This happens to me all the time! I’ll be working on something, getting stuck and KPow drops a video that relates perfectly to my problem. It’s so serendipitous!!
Wow I've only just realized he says front-end friends in the beginning. I always thought he said friend and friends which, admittedly, is weird, but I don't know every saying, so yeah, that happened
🤯 I always thought he was saying “friend and friends” as well. I thought it was neat actually. Like, saying hello to me specifically and then everyone else.
Same. He doesn't really pronounce the t as strong as front so I had no idea!
Hahaha never realised until you mentioned it....
Mind blown! It has always been a sort of affirmation for me. Like the scene from that old show Touched by An Angel where the actress looks into the camera and says in that rich Irish accent, "God loves you". I pretended it was directed at me, like I am the friend and everyone else is friends. Life has less meaning now. Hahaha! Still great content and the hoodie is awesome too from the merch below!
I've noticed him annunciating it a lot more recently, I imagine for precisely this reason as I was in the same boat!
Came here for the display: contents, ended up getting to know more css complex selectors. YES!
Kevin, thanks for always talking about the accessibility of the techniques you discuss.
I recently came across this property myself while toying around with the Dev tool and then you upload this explanation video. 💛
I stopped the video at 08:56 to get a single frame and talk about math.
It's natural to put variables first and then numbers, like (n + 4) or (-n + 3).
But you could agree that -just listening to your own explanation, you could understand it easier just tweaking the formulas this way:
a) count starting from the 4th element till the end (4 + n) as you explain at 08:04 or,
b) start at the third position and go backward to the beginning (3 - n).
And thanks for another awesome explanation!!
A good use-case for this with grids, is when you need to support graceful degradation...
If a browser (like Opera Mini) doesn't support grid, you'll likely want to have a lot more wrappers for elements, but, using those wrappers in the HTML will break your grid layout. Enter `display: contents;` to the rescue... Now you can support your basic, functional layout with boring wrappers, but in browsers that support `display: contents;` (which is most places that grid is supported, except for IE), you'll still have your nice grid layout available.
I use display contents all the time to get rid of unnecessary (for styling purposes at least) elements an get items onto my grid or flex kebab. Sometimes on multiple levels to really unwrap something nested deeply!
"Flex kebab" rolls off the tongue, love it! 😂
1:25 AM
4/6/2022
For some use cases you may want to work with subgrid instead. Unfortunately, the only browser currently supporting it is Firefox, though, but it seems it'll come to Chrome and Safari soon, too.
YOUR TIMING
just what i needed
i was making some component library, and this is just what i needed
Oooooh, I already imagine it to be useful for the combo of ::after and display: contents - like those separators you see in the menus! This is incredible.
I mosttly use display:contents to posthumously fix horrible DOM lol. I find people who aren't as passionate about UI tend to wrap things in too many containers while they're wrangling layout.
It's also handy for component-based JS frameworks like Angular which wrap every component in a custom container. With display:contents you can free the contents of the component back out into the main flow.
I was having trouble with this just now! I came to TH-cam to watch your videos obout grid to find my way around the problem, and find this video on my feed! Kevin you're God 🤣
That was amazing! It's satisfying to find out something that I didn't know.
It's Interesting and seems useful !
oh wow! this is actually SUPER useful!
This is so cool! Thank you for these great examples
You are great! Thank you for your time and efforts to explain us.
Great video and nice explanations as always!
this is really good for customizing components from libraries
Great stuff, thanks for sharing!
there's a lot of info in this video! thanks kevin!
Hey Kevin. A lot of times we need to refer back to your videos to find something we've watched before - especially is sending them to others. Can you keep this in mind when setting your video titles? "A powerful CSS display property that no one talks about" gives me no hint in a month's time what it involved, to jog my memory.
This makes a lot of sense for viewers, but unfortunately not for content creators. Interesting titles are key to generating views. Check out Veritasium's great video on this topic.
@@gabriellundmark It get that, but there can be a balance.
I've only now seen the image helps. I guess I've had to go with that rather than a search.
I must tell this solved me sometime headaches! Well, maybe not that much, but enough to find it cool and as always, thank you for all you do!
I wanted to use a Button component I had made with the semantic of a link tag, I couldn't just change to a "a" tag, I would need to style everything again, and also I had the button with another button in a flex container, which embracing the button with the tag broke the 50/50 flow. So I just threw the "display: contents" in the a tag and it came back to the way I wanted it to be!
*Noice*👌
Thank you
I´m your student in Scrimba. Great course
It's really interesting! Thank you for your great content.
Thanks for the useful info, much appreciated friend.
I've noticed that the way text gets placed when using display content in a flex box doesn't always behave as expected. Even in your example, it appears like the text's basline is lost/changed. It is very easy to see if you compare the vertical position of the logo with the rest of the links between 5:30 and 9:20 . Can you elaborate a bit on this?
In this specific case (see Kevin's Codepen at codepen.io/kevinpowell/pen/dyJRJjO). The reason for the misalignment is that the s have a bigger font size and line height than the logo. The issue is unrelated to display: contents. In flexbox layout, the flex items get stretched by default and the text is placed at the top of the element. To fix that, you can apply an align-items: center to the flex container to center them or align-items: baseline to align them on their common baseline. See developer.mozilla.org/en-US/docs/Web/CSS/align-items for more info on that.
Another point you need to consider using display: contents, which Kevin mentions in his video, is that it causes the element not to generate a box. That means that layout related properties like margin, border or padding have no effect on it. So if they only contain text, you won't be able to change its layout, only its style like font-size, color, etc.
@@SebastianZartner The link does not work and throws a 404 error.
Really interesting content, as always! It's a bit challenging to use but I do like it! About the flex order you could make use of tab-index (on clickable elements) to deal with it, don't you?
Nice explanation, thanks!
Your content is amazing, and you too.
9:55 Why would the tab start at the logo since the logo order is "2" in css, even though the logo comes first in the html?
Awesome css tricks, thank you sir ❤
Nice video! That seems like a really cool property, and I think you wrote display: contents wrongly in the description btw (as display: content)
Oh thanks!
You always amaze me
Kevin repeated grid columns so hard that even "it" in the phrase above became double lol
Probably the main reason this was/is not used, is very likely MSIE -- as always. There have also been implementation bugs in evergreen browsers for years that resulted in severe a11y issues with the element being virtually "ripped" from the DOM.
This property fundamentally changes how markup structure and css work together and there is no trivial fallback or workaround in CSS that can be used.
I would've loved to use this years ago for every other grid structure, but this property came with too much trouble and requires extra work to make both IE users *and screen readers* happy.
AFAIK the a11y issues have been solved by now, and with IE being officially dead, we can try to use this on sites where IE users are virtually non existent, so as always: check your logs and analytics first.
interesting css property, thank you!
you're awesome
Kevin, I am just learning css with grid, flex etc. What makes it useful for me watching your videos is when you put ALL your code up, like on codepen. I can then fork it and start playing with your code, making changes and seeing how those changes effect the the outcome and adding my site coding. I am presently watching this and adding your code to VSC... however, since my css is slowly coming together I am missing the code you pre-made in your css file... body etc. SO, I'm not seeing what you are showing as far as all the css formatting. Maybe I'm dyslectic, not really sure, but I've always done better by visual learning as apposed to reading. So, in this case I like to grab html and css files and just start making a change and then looking at the browser to see that change. Crazy, I know, but that's how I learn. I have a bunch of websites that I started for friends years ago that I am now looking to update with things like grid, flex, animation using transform and transition etc etc. I see a great navbar on the web so I start googling how to do it... I always wind up watching your TH-cam channel. All those sites I designed never used any CSS. I used Dreamweaver. Anywho, I'm starting to babble. Geez, was there a ? in there somewhere?
Sir I m your big fan...😊
Happy to hear that 😊
Very interesting . Thank you. Do you think that footnotes would be good use-case for this as well? For example a text where footnotes tags are within but rather should be displayed visually bellow the text?
This feels like it can be used to get subgrid like behavior, to some extent.
Gonna have to play with this a bit to see how far it will go.
I have a question. You said Mozilla had fixed the bug, at 10:35 in the video, and it happened a few days ago. How do you have access to this news? There is some news letter or you consult it by searching? And the last one. Where can I get more advanced stuff on the web, beyond you channel of course?
Thanks again.
I follow the bug reports on some things, so I get emails as they're fixed. You can Google the name of the feature and "bug report" and find them for all the browsers.
Another set of 💎💎💎
Does anyone else think Kevin has somehow weaponized "my friend and friends"?
🤣🤣 - I'd have failed pretty hard at it, since it isn't what I say, it's just what everyone hears (including TH-cam's auto-captions), lol
well I heard "my front end friends"
@@KevinPowell it’s like a mr rogers thing. You’re saying hello to ME!
@@KevinPowell Well now I'm just embarrassed...
Kevin, it would be super cool if you linked your Codepens under your videos so watchers can reproduce the things you're doing in them!
display: contents - that's a new one on me. tell me more, obi wan
I was looking for the exact opposite, sibling acting as a child, which turns out to be the exact same problem lol.
Getting child to behave as a sibling, or how i call it: the Alabama special.
Kevin, I have a question. when I have my grid-template-area setup, different cells with different content widths get different alignments and justifications. And I'm not able to impose a rule from the parent (while using grid-area) for all children with different content widths to look the same. This is absolutely possible using grid-template-columns. could you make a video and explain how are we able to do so with grid-area only?
You can definitely specify cell sizes directly with grid-template-areas.
grid-template-areas: "a b" 1fr "c d" 1fr / 1fr 1fr;
This will make both columns the same width and both rows the same height.
@@DrugedSheep i searched your clue and got it thanks
Amazing!!!
I'm always surprised how much CSS stuff there is that I have never heard about
Hi, in HTML what is that unpkg lines? I know what are they doing, but where it is come from? What is unpkg?
Once I asked about this property on stackoverflow and someone pointed me out that this property has some real issues about a11y depending screen readers, do you know something about this? And still safari is not supporting this fully so writing some workarounds for this one is really painful
Would wrapping this code in @media screen{ } solve the accessibility issues?
Found this out while trying to include a button in a paragraph, but have its text wrap with the paragraph text. If y'all have a better solution for this, please let me know
🔥🔥🔥
What happened to all the smooshing? Not much going on any more! 🤣🤣
I've been doing loads of grid/flex stuff lately to get text beside images, so will give this a go! Thank you.
Golden rule: When writing something new, keep compatibility. If you don't want to be hated by owners of forcibly-obsolete devices and browsers.
Goodbye old browsers
That's a very good point! Creating a website, you should always be backwards compatible. I'd really like to see Kevin emphasize that and show how to work around unsupported features. I imagine, for display: contents it'll be very hard to create a proper way of displaying your contents for browsers that don't support it.
Awww, I used nth of type for re-ordering items in a flex layout recently and didn't realise until this video that it causes accessibility issues 🤦🏻♀️
It kinda feels dangerous that re-ordering is bso easy given this downfall.
You are CSS evangelist King 👑
It doesn't work even under the fox of the header. Any general tips?
So cool!
Hello Kevin. Great videos. Kevin would you great a video on forms like a contact us that sends the content to the owner of the website with recapture.
The problem with forms is it really depends on the tech stack your using. I could look at a simple way to do it though, it just might not be the best solution for everyone... maybe I could look at 2 or 3 🤔
@@KevinPowell that is one of the reason why html for me feels limiting. Any help would be greatly appreciated.
@@hughclarke8504 HTML is the markup of your frontend page. Sending emails happens on the server. Technically, you could use anchor element with email href but that will use the default email client of the user.
My answer for the introduction was. I absolutely never heard about what you mean, fuck I'm totally confused, I want to quit. But in the end I got what you mean.
Oh no, don't quit! This is a bit more advanced stuff, don't worry about it and keep on going, you've got this 💪
@@KevinPowell I just finished the video. I've got what you mean. I gonna training it today. Thank you.
Could this be used as a fallback for subgrid, then?
Sort of, but it's not really the same thing. It would be really similar though, but there are a few good posts out there about how it's not really a replacement for it. Considering subgrid looks like it'll have full support in the coming months anyway, I'd just hold off, as support for this and subgrid aren't going to be very different.
The main difference is that subgrid still renders it's own box, useful for background colours etc.. subgrid also doesn't have to inherit the entire grid definition, while this just dumps everything into the parent. You can however achieve most of subgrid using contents, (partial) inherit on grid template and custom properties
yet another thing how to confuse most of the web devs (co-workers on the project), I see the benefit, but on the other hand, why would we make our styles more complex when there are other ways that everyone can understand (+have better browser support)
Cool!
This could be really useful
so exited about the topic that he forgets half of his intro sentence :D
😂😂
Wow this is great powell
Analogies to display: react-fragment 😀
display: contens is simply opposite to make display: block. In the first example (if u could edit HTML) changing block into inline would result the same :)
Great trick.
Whoa!
thank you
I'll love it if you could coach me on my tech journey
I wish I could too! I get asked a lot, and can't mentor everyone sadly. Come and join my Discord though, so many helpful people there!
Wow, getting a reply from you means alot
I've joined your discord channel since January or February
very interesting
Just get out of bed this morning? ROFL
This is voodoo. Amazing what is possible with layouts these days.
great!
sweet home alabama
🤯
seems to be a select use, but a nifty trick all the same
He has a lowkey peter griffin voice
Kevin thank 🎓 nth-of-type(....)
This is really cool, but I do think you're being overly optimistic about being able to use this already. As a general rule I think it would be good to include a caniuse type visual at the start of this kind of video.
The 'Wowwwww 🤯' moment th-cam.com/video/cs37yx73b1o/w-d-xo.html
You're so so amazing Kevin
WHATTTT???
Alabama html
Css is the most outdated and patched up thing
🤯