I'm so glad that the W3C, etc are concentrating on native ways of doing away with the JS widgets we used to have to create to compensate for HTML/CSS shortcomings (e.g. dialog, popover, details -> summary, the upcoming 'select' replacement). This will save thousands of hours of work.
Yes, indeed, it will! I love the new features that are coming to HTML & CSS. 🙂 We're moving in the right direction, even though it might be hard to keep up with everything new. 🙂
Thanks, I didn't know about the name attribute before this! Has the implementation for changed recently in Chrome? I’m not seeing the ::details-content pseudo element in Chrome 126. There’s instead, which is not stylable. Also, the implementation is different in Safari, which seems to add & remove a element from the shadow DOM when the details element is opened and closed.
Thanks, Jouni! 🙏 I don't think it changed. Those pseudo-elements are not visible as other pseudo-elements in DevTools (at least yet), so you can only get a sense of what's available by going through shadow DOM. This is how it looks for me in Chrome 126: cln.sh/RPM97CQZ - the hint that this is stylable as pseudo-element is attribute `pseudo="details-content"` Yes, you're correct. This is only working in Chrome right now, not Firefox and Safari, which don't have the same implementation. Sorry, I should have done a better job of explaining this in the video. 😔
@@CSSWeekly I'm also having this problem in Chrome 130 the shadow DOM element doesn't have a pseudo attribute, just an id that doesn't appear to be selectable. Inside #shadow-root (user-agent) I see only , no pseudo="details-content" in sight.
@pozz941 This isn’t supported by default in Chrome Stable, but it should work in Chrome 130 if you have enabled the flag Experimental web platform features. Can you check if this is the case? 🙂
Great video!! Would love some info on the contain property and how it works and what all its different values do(style, layout, paint, strict etc). I’ve been searching for half a year for a deeper dive into contain and how to use it and there’s very few resources and none that helped me figure out when I would use it.
Thanks so much for the compliment and a fantastic suggestion! 🙏 I'm adding this to my ideas list as one of the top priorities, as I'm very interested to dig into it as well. 🙂 So, hopefully, you'll see the guide you've been looking for here in the next few weeks. 🤞
@@CSSWeekly that’s so exciting to hear , I’m so lost on how or when to use contain outside of just using container-type. Thanks for your reply! How it interacts with flex and grid is also interesting and may be worth touching on in the video since they are our main layout tools these days ☺️
Thank you so much, Mohammed! This means a lot! 🙏 What exactly do you mean by "video on scroll"? Do you want to know how to control the video playback as you scroll the page?
It will be great if the name attribute get more browser support. I really like how they use the name attribute for that purpose, it reminds me of the radio buttons grouping. Thanks Zoran!
Wow I feel bad now that I used input:checked to do the exact same thing instead of the details element which must be way more semantic. I was able to reproduce the calc-size experiment, I'm happy with its effect. I need to check calc-size other possibility other than auto, like max-content, min-content and more Thanks for sharing
You're welcome, Felquis! 🙏 The details element is pretty great, and supported across browsers since begining of 2020. If isn't that easy to fully animate it, so it's not that unusual to reach for an alternative solution. 🙂 Yes, calc-size() should work with all those keywords-I haven't tested it that extensively though, so I can't say for sure. 🙂
Hey Laurent, thanks for your question! 🙏 I've just tested it, and this is working for me in Chrome 130 and Chrome Canary. In Chrome 129 calc-size() is supported, but not ::details-content pseudo-class, so this might be the reason if you're still on that version of Chrome. 😕
Ok, I'm on exactly the same version. 🙂 Do you have the "Experimental Web Platform features" flag enabled in chrome://flags/? This is the only other thing that might explain why it doesn't work for you. 🙂
Thanks so much for your question! 🙏 No, it shouldn't affect it at all. There is nothing here in the code that would change the page load behavior or mess with the layout at that point. 🙂
Thanks for the heads-up, Levan! 🙏 I just checked it in the latest Chrome Canary 128.0.6578.0, and it no longer works. It seems that the implementation changed, and the "#details-content" Shadow DOM element is no longer exposed as pseudo-element ::details-content - I'm not sure if that's intentional or temporary, so this solution doesn't work right now. 🥺 I'll have to dig into it and see if there's a way to avoid this. 🤔
The calc-size() function should work if the Experimental Web Platform Features flag is enabled. The details content element is no longer exposed as a pseudo-element (::details-content), which is why this solution no longer works. 😔 Here's a demo that utilizes calc-size() - it works for me in the latest Canary: codepen.io/ZoranJambor/pen/GRaNZNV
I don't think there is a polyfill, and I would say you don't even need it. You can use this as a progressive enhancement; the component will be usable, just not animated. 🙂 Alternatively, you can use something like a CSS grid hack to animate to height: auto and use additional div wrappers instead of pseudo-elements. Does this help? 🙂
I agree wholeheartedly, Jens! 🙂 But more and more things like this are possible with new CSS features, which are certainly steps in the right direction. 🙂
Did not know that details[name] attribute allows for a single-active accordeon. Much more simple! Before this I'd use `input[type=radio]` with some funky `:checked ~` selectors + display: grid 1fr hack to transition between height: 0 / auto 🤢
I'm so glad that the W3C, etc are concentrating on native ways of doing away with the JS widgets we used to have to create to compensate for HTML/CSS shortcomings (e.g. dialog, popover, details -> summary, the upcoming 'select' replacement). This will save thousands of hours of work.
Yes, indeed, it will! I love the new features that are coming to HTML & CSS. 🙂
We're moving in the right direction, even though it might be hard to keep up with everything new. 🙂
Really useful. The animation method I used to use for this only worked the first time the user clicked on the - really weird. Yours works. Thank you.
I’m thrilled to hear this! Thanks ao much for watching and sharing your experience! 🙏
Much appreciated, Zoran! Your videos are super handy and forward-looking.
Thank you so much, Oleg! This means a lot! 🙏
Loved the vid. Learned a lot. Also thanks to kevin for suggesting your channel.
Thanks so muc, Kaustav! I'm thrilled to hear you loved the video, even after watching Kevin's. 🙂
Wow, didn’t realize Far Cry 3's Vaas had a side gig as a teacher! Waiting for the 'Did I ever tell you the definition of insanity?' lesson. 😂
Thanks, I didn't know about the name attribute before this!
Has the implementation for changed recently in Chrome? I’m not seeing the ::details-content pseudo element in Chrome 126. There’s instead, which is not stylable.
Also, the implementation is different in Safari, which seems to add & remove a element from the shadow DOM when the details element is opened and closed.
Thanks, Jouni! 🙏
I don't think it changed. Those pseudo-elements are not visible as other pseudo-elements in DevTools (at least yet), so you can only get a sense of what's available by going through shadow DOM. This is how it looks for me in Chrome 126: cln.sh/RPM97CQZ - the hint that this is stylable as pseudo-element is attribute `pseudo="details-content"`
Yes, you're correct. This is only working in Chrome right now, not Firefox and Safari, which don't have the same implementation. Sorry, I should have done a better job of explaining this in the video. 😔
@@CSSWeekly I'm also having this problem in Chrome 130 the shadow DOM element doesn't have a pseudo attribute, just an id that doesn't appear to be selectable. Inside #shadow-root (user-agent) I see only , no pseudo="details-content" in sight.
@pozz941 This isn’t supported by default in Chrome Stable, but it should work in Chrome 130 if you have enabled the flag Experimental web platform features.
Can you check if this is the case? 🙂
You are awesome, so nice, detailed and organized explanations, thank you very much.
That is such a wonderful compliment, Talat! Thank you so much; it means a lot! 🙏
Great video!! Would love some info on the contain property and how it works and what all its different values do(style, layout, paint, strict etc). I’ve been searching for half a year for a deeper dive into contain and how to use it and there’s very few resources and none that helped me figure out when I would use it.
Thanks so much for the compliment and a fantastic suggestion! 🙏
I'm adding this to my ideas list as one of the top priorities, as I'm very interested to dig into it as well. 🙂
So, hopefully, you'll see the guide you've been looking for here in the next few weeks. 🤞
@@CSSWeekly that’s so exciting to hear , I’m so lost on how or when to use contain outside of just using container-type. Thanks for your reply!
How it interacts with flex and grid is also interesting and may be worth touching on in the video since they are our main layout tools these days ☺️
Thanks for your suggestions about using it in Flexbox and Grid contexts! I'll do my best to cover as possible. 🙂
Perfect video over youtube, so smoothly explained. Awesome video please make video for video on scroll using CSS and JS
Thank you so much, Mohammed! This means a lot! 🙏
What exactly do you mean by "video on scroll"? Do you want to know how to control the video playback as you scroll the page?
@@CSSWeekly Yes you are right 👍, i want video that plays smoothly on scroll without using GSAP
That's a great suggestion, Mohammed! I'll add it to my list of ideas. No promises (yet) of when or if it will be on the channel. 🙂
It will be great if the name attribute get more browser support.
I really like how they use the name attribute for that purpose, it reminds me of the radio buttons grouping.
Thanks Zoran!
Yes, it's unfortunate that Firefox is lagging. 😔
I haven't thought of that, but it does work exactly the same. Thanks for your insight, Ahmad! 🙏
connecten by name is just brilliant ! 🤓
Indeed it is, Daniel! I wasn't even aware it was possible until researching this video. 🙂
Superb video. Thank you!
Thank you so much, Roger! I'm thrilled you loved it! 🙂
Wow I feel bad now that I used input:checked to do the exact same thing instead of the details element which must be way more semantic.
I was able to reproduce the calc-size experiment, I'm happy with its effect. I need to check calc-size other possibility other than auto, like max-content, min-content and more
Thanks for sharing
You're welcome, Felquis! 🙏
The details element is pretty great, and supported across browsers since begining of 2020. If isn't that easy to fully animate it, so it's not that unusual to reach for an alternative solution. 🙂
Yes, calc-size() should work with all those keywords-I haven't tested it that extensively though, so I can't say for sure. 🙂
as a workaround for now you can make it a grid and transition grid-template-rows from minmax(0, 0fr) to minmax(0, 1fr)
Precisely, Viraj! This is a solid cross-browser solution! 🙂
Hello, if I'm not mistaken, calc-size is now supported in Chrome, yet the demo only works in Canary? Thank you.
Hey Laurent, thanks for your question! 🙏
I've just tested it, and this is working for me in Chrome 130 and Chrome Canary.
In Chrome 129 calc-size() is supported, but not ::details-content pseudo-class, so this might be the reason if you're still on that version of Chrome. 😕
@@CSSWeekly Hi, OK thanks, but it's strange for me this work only in Chrome Canary, my Chrome Version 130.0.6723.92
Ok, I'm on exactly the same version. 🙂
Do you have the "Experimental Web Platform features" flag enabled in chrome://flags/?
This is the only other thing that might explain why it doesn't work for you. 🙂
Read somewhere that is not possible to add a small transition effect in pure css ? Do you agree with this point ? Thanks.
I haven't heard an argument about this before, Florent. I would say I disagree, but I might be missing something. 🤷♂️
What kind of effect exactly?
Will this negatively affect CLS metrics? Thanks for the video, Zoran.
Thanks so much for your question! 🙏
No, it shouldn't affect it at all. There is nothing here in the code that would change the page load behavior or mess with the layout at that point. 🙂
This is amazing :O
Thanks so much! 🙏
Works only in Chrome, but it's better than nothing, thank you!
Indeed! Hopefully, it will soon be supported by other browsers, too. 🤞
Great one 🎉
Thanks so much! This means a lot! 🙏
Animation doesn't work has there been an update or something?
Same for me, I tried it in the lastest Chrome Canary. I couldn't find CSSCalcSizeFunction in the flags list
Thanks for the heads-up, Levan! 🙏
I just checked it in the latest Chrome Canary 128.0.6578.0, and it no longer works. It seems that the implementation changed, and the "#details-content" Shadow DOM element is no longer exposed as pseudo-element ::details-content - I'm not sure if that's intentional or temporary, so this solution doesn't work right now. 🥺
I'll have to dig into it and see if there's a way to avoid this. 🤔
The calc-size() function should work if the Experimental Web Platform Features flag is enabled. The details content element is no longer exposed as a pseudo-element (::details-content), which is why this solution no longer works. 😔
Here's a demo that utilizes calc-size() - it works for me in the latest Canary: codepen.io/ZoranJambor/pen/GRaNZNV
@@CSSWeekly Thank you so much! Works great in canary without any flags
That's curious. It still doesn't work for me in the latest Canary, 129.0.6654.0 😕
Anyone know of a polyfill for this?
I don't think there is a polyfill, and I would say you don't even need it. You can use this as a progressive enhancement; the component will be usable, just not animated. 🙂
Alternatively, you can use something like a CSS grid hack to animate to height: auto and use additional div wrappers instead of pseudo-elements.
Does this help? 🙂
clean
Is this positive, Santiago? 🙂
Noice!! ❤
Thanks so much! ❤️
name= seems to work in firefox animation not.
Yes, you're right, Stephen. Firefox still doesn't support ::details-content pseudo-class, that's why the animations don't work.
This is a big thing for the web. In a perfect world js should not be used for simple stuff like this.
I agree wholeheartedly, Jens! 🙂
But more and more things like this are possible with new CSS features, which are certainly steps in the right direction. 🙂
Sadly still not supported in Firefox
I got it working except for animation.
@@stephenpetersen3607 yes, but animation was kind of the point of the exercise ;)
@@stephaniepeters2590 chrome its works fine, firefox (didn't he mention that in the video) just needs to catch up, but it functions fine.
You're both right. 🙂
I wanted to showcase the animation, but the technique can be used today as a progressive enhancement. 🙂
Yeah, cool. But what about ~45% of the internet users?
They’ll still have a fully functional component; it just won’t be animated. 🙂
Did not know that details[name] attribute allows for a single-active accordeon. Much more simple!
Before this I'd use `input[type=radio]` with some funky `:checked ~` selectors + display: grid 1fr hack to transition between height: 0 / auto 🤢
Yes, there are hacky ways to create a disclosure widget like this, but thankfully, we're getting new CSS features that make this (almost) trivial. 🙂