Another great video, Kevin. You can get the details to automatically close when another one is opened by giving each of them the same name. According to caniuse this currently has 83.12% browser support.
thank you Kevin, you make CSS so much fun. I love your attention to details, small touch on list-style-position makes makes big diffrence in UI. Keep going!
I had just looked up your previous video about animating auto height just a few hours prior. The trick is basically the same (for the animation part at least). So it's quite a coincidence that you end up putting out this video on the same day 😄
We use "accordion" blocks a lot for our websites, and I know this is unrelated, but I just now discovered details/summary. This is going to make life so much easier! Thanks a lot.
Considering that you use very new features I wish that you use nested CSS instead of this. Nested CSS is so easy to adapt and change and it's easier to port because of the nesting as well. For readability it also help to see what in what is being nested. It have better browser support that many rules used here.
The Codepen version in the description has as a typo that not only prevents the transition from working, it prevents the details contents from being visible when its opened (there's also so extraneous JavaScript in that pane). This selector: details:open::details-content should be: details[open]::details-content
Almost think "interpolate-size: allow-keywords;" just needs to become the default for all browsers, also allow-discrete. Yes it might cause old sites to look slightly better and fight a bit with the JS (which should win I think)
VoiceOver+Safari for Mac is kind of buggy operating details/summary elements; two open bugs are expand/collapse states aren't announced when they change and focus moves off the summary element when you activate it.
Very cool video! thx I'd be cool if you could make a video sometime in the future about the details element's name attribute? By using this attribute and rearranging the details elements horizontally you can make pure css tabs without the need of employing hacks including radio labels. With you animation it would be extra cool:
There are some cases where both could have unwanted consequences in existing projects if you're already handling what they do manually, for example, using JavaScript. I think it's perfectly reasonable to include both in your reset for new projects, but for existing projects, I would double-test my transitions. 🙂
@@KevinPowell This is one of the important things, but here is a code that worked for me, look at the comment above, it works like crazy but you need to know it because I found almost no information about it on the net
Kind sir, I am wondering if the shadow dom (shadow-root details::details-contents stuffs) is browser dependent because it looks like it is internal/browser implementation? 🤔 I think it would be great to know if the code we are using browser dependent or not. Thank you very much.
How can we update it to be on hover since these days a lot of themes use details for creating dropdown menu would love to see how it can be managed as a menu (mega menu) would be a cool tutorial :)
Why isn't the default for interpolate-size set to allow-keywords? There must be a good reason otherwise it doesn't make sense for it to be anything else??!!
Pseudo elements exposed by the shadow dom are styleable. For a normal web component, that would be via ::part or ::slotted, but the browser can do its own magical things.
I tried your code for animating height auto but it didn't work for me. Kindly help me. Like if you had similar issues. I'd really love for Kevin to notice this comment. Thanks
@Black1991Star I don't think so. According to caniuse, ::details-content is only available on Chrome 131-133. I was testing this out on my Mac and, as it is older, I can't update Chrome past 128 (at least at the moment)
Thank you so much for mentioning my video and for your kind words about CSS Weekly. Your support means a lot, Kevin! 💙
Thanks for making awesome CSS content!
Another great video, Kevin.
You can get the details to automatically close when another one is opened by giving each of them the same name. According to caniuse this currently has 83.12% browser support.
TY TY TY. This makes them act like radio buttons, you can only have one selected at a time. 👍
While nice to have, I've had too many clients/users complain about not being able to have multiple open at once.
thank you Kevin, you make CSS so much fun. I love your attention to details, small touch on list-style-position makes makes big diffrence in UI. Keep going!
Should probably add a disclaimer that people will not be able to test this without Chrome 131+ currently. Otherwise great video!
thanks, I was losing my mind for a minute there and then I tested it in canary
I had just looked up your previous video about animating auto height just a few hours prior. The trick is basically the same (for the animation part at least). So it's quite a coincidence that you end up putting out this video on the same day 😄
We use "accordion" blocks a lot for our websites, and I know this is unrelated, but I just now discovered details/summary. This is going to make life so much easier! Thanks a lot.
Look into giving them all the same name, then only one will be opened at a time as well :)
Playing with a drawer and this comes out. Pure gold to know!
Considering that you use very new features I wish that you use nested CSS instead of this. Nested CSS is so easy to adapt and change and it's easier to port because of the nesting as well. For readability it also help to see what in what is being nested. It have better browser support that many rules used here.
Thanks a lot, we all know your video is going to be useful before hand
Zoran Jambor is a good guy and his channel is well worth following too.
High level skills there Kevin! I learned a thing or two. 🎉😊
Asked and answered! Thank you.
The Codepen version in the description has as a typo that not only prevents the transition from working, it prevents the details contents from being visible when its opened (there's also so extraneous JavaScript in that pane). This selector:
details:open::details-content
should be:
details[open]::details-content
Almost think "interpolate-size: allow-keywords;" just needs to become the default for all browsers, also allow-discrete.
Yes it might cause old sites to look slightly better and fight a bit with the JS (which should win I think)
Cool ! That is going to be awesome in 10 years when the support is better 😂😉
Been a hot minute, is accessibility on getting any better or is the custom accordion still the best option?
VoiceOver+Safari for Mac is kind of buggy operating details/summary elements; two open bugs are expand/collapse states aren't announced when they change and focus moves off the summary element when you activate it.
Very cool video! thx
I'd be cool if you could make a video sometime in the future about the details element's name attribute? By using this attribute and rearranging the details elements horizontally you can make pure css tabs without the need of employing hacks including radio labels. With you animation it would be extra cool:
It actually has decent support now too! Better than some of the things I was doing in this video!
Would it be “safe” to add `transition-behavior: allow-discrete` and `interpolate-size: allow-keywords` to our CSS reset?
Following.
Yes - CSS that a browser doesn't recognise will do nothing - it doesn't break or throw errors.
There are some cases where both could have unwanted consequences in existing projects if you're already handling what they do manually, for example, using JavaScript.
I think it's perfectly reasonable to include both in your reset for new projects, but for existing projects, I would double-test my transitions. 🙂
Like @CSSWeekly said, for new projects, I'd definitely use them, yup!
Wonderful
Are the semantics of summary/details such that this shouldn't be used for, say, dropdown menus? Or is it fair game as long as it works?
Hey Kevin! Great Video! I am big fan of the no more JS for such simple microinteraction :) juhu
The question is how do you make the transition effect in the dialog element as well?
of closing and opening..
.Dialog{
max-width: 90%;
width: 350px;
background: var(--color-fff);
color: var(--color-000);
padding: 20px;
border-radius: 10px;
border: none;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
transition: opacity 0.4s cubic-bezier(0.4, 1.6, 0.4, 0.8),
scale 0.4s cubic-bezier(0.4, 1.6, 0.4, 0.8), overlay 0.4s allow-discrete,
display 0.4s allow-discrete;
opacity: 0;
scale: 0;
&::backdrop {
transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete,
background-color 0.4s;
}
&[open] {
opacity: 1;
scale: 1;
}
&[open]::backdrop {
background: rgba(0, 0, 0, 0.3);
}
}
@starting-style {
.Dialog[open] {
opacity: 0;
scale: 0;
&::backdrop {
background-color: hsl(0 0 0 / 0);
}
}
}
Already recorded a video on that, coming out in 2 weeks I think :D
@@KevinPowell This is one of the important things, but here is a code that worked for me, look at the comment above, it works like crazy but you need to know it because I found almost no information about it on the net
Kind sir, I am wondering if the shadow dom (shadow-root details::details-contents stuffs) is browser dependent because it looks like it is internal/browser implementation? 🤔 I think it would be great to know if the code we are using browser dependent or not. Thank you very much.
It isn't supported across other browsers yet - but when it *is*, the pseudo-element names like '::details-content' should be the same.
it is an internal implementation at the moment, but it's part of the spec and it'll work in other browsers as well, once they add support for it :)
@@Killyspudful Nice!
@@KevinPowell Cool!
How can we update it to be on hover since these days a lot of themes use details for creating dropdown menu would love to see how it can be managed as a menu (mega menu) would be a cool tutorial :)
Why isn't the default for interpolate-size set to allow-keywords? There must be a good reason otherwise it doesn't make sense for it to be anything else??!!
Hey Kevin, can you say which VSC Theme that is? Looks stunning to me. Thanks in advance.
One Dark Pro Var Night :)
@@KevinPowell Thanks a lot. I had One Dark Pro, but not "Var Night".
Nice video.
How could you style a shadow-dom element when styling details::details-content? i thought that was not possible.
That’s the pseudo selector
Pseudo elements exposed by the shadow dom are styleable. For a normal web component, that would be via ::part or ::slotted, but the browser can do its own magical things.
@@simonhartley9158 thanks!
Really wanted to see it's supported 100% browsers.Otherwise, can't use it on production
It gracefully degrades to the normal behaviour. so, no reason not to use it now?
@ well we have other ways to achieve this perfectly across the browsers. No need to do this only for simplify the code
@@geforcesong that's fair
❤
For anyone who tries playing with this, Chrome 131 won't be GA until Nov 6th (2024).
2:53 - “interpolate-size” literally only works in Chrome and nowhere else. This is a nonstarter.
I tried your code for animating height auto but it didn't work for me. Kindly help me. Like if you had similar issues. I'd really love for Kevin to notice this comment. Thanks
Do check the browser support, some of this is very new :)
Someone mentioned in a comment that you will need Chrome 131 or higher.
Dose it work in Safary ?
Just hopping in to get the answer too when you get it
@Black1991Star I don't think so. According to caniuse, ::details-content is only available on Chrome 131-133.
I was testing this out on my Mac and, as it is older, I can't update Chrome past 128 (at least at the moment)
No.
Not yet. I talked about browser support and linked to the tables in the description :)
Way to complicated for a simple transition 😕