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.
@@doug7897 My use was (and there is prob an easier way) a list of details > div > details, etc. with the divs popping out sideways. This just cuts out some JS.
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
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.
Absolutely fantastic! I have a product catalog I am going to implement this with using nested details/summary. I was working on the prototype while watching your video and it is working beautifully! This will replace a lot of nested ul/li and javascript to expand collapse products items in my catalog. Thanks Kevin!
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!
Дуже дякую за інформування про нові властивості CSS! Надкорисна інформація. Чекаємо з нетерпінням оновлення браузерів. А ваш урок вже пішов на користь. Впровадив на чинному сайті на роботі. Дякую ще раз!
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 😄
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.
@KevinPowell your codepen appears to be broken either by a typo or maybe a spec change since this video? Codepen, line 24, `details:open::details-content` but works with `details[open]::details-content` instead.
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 My question is regarding implications with having those rules applied globally with the star selector. Like Adam Wathan’s infamous `min-width: 0` rule…
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:
Using Chrome Version 130 but I can only see a details-content id on the slot, it doesn't say psuedo="details-content"? Trying to style it has no effect either. I cant work out what I am doing wrong.
@@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.
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??!!
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)
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 :)
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)
interpolate-size: allow-keywords? Makes no sense. Hopefully it'll be reworded to something more intuitive. Perhaps 'interpolate-size: interpolate;' would make more sense.
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!
@@KevinPowell ❤
@cssweakly hi
@@YasirKhan-nn2ss Hi Yasir! 👋
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.
@@doug7897 My use was (and there is prob an easier way) a list of details > div > details, etc. with the divs popping out sideways. This just cuts out some JS.
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
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
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 :)
Absolutely fantastic! I have a product catalog I am going to implement this with using nested details/summary. I was working on the prototype while watching your video and it is working beautifully! This will replace a lot of nested ul/li and javascript to expand collapse products items in my catalog. Thanks Kevin!
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!
Дуже дякую за інформування про нові властивості CSS! Надкорисна інформація. Чекаємо з нетерпінням оновлення браузерів. А ваш урок вже пішов на користь. Впровадив на чинному сайті на роботі. Дякую ще раз!
Playing with a drawer and this comes out. Pure gold to know!
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 😄
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.
Zoran Jambor is a good guy and his channel is well worth following too.
Thanks a lot, we all know your video is going to be useful before hand
High level skills there Kevin! I learned a thing or two. 🎉😊
Worked like a charm, thanks! 🙌 But I'd update the title to clarify Chrome 131+ only - this got me too.
@KevinPowell your codepen appears to be broken either by a typo or maybe a spec change since this video? Codepen, line 24, `details:open::details-content` but works with `details[open]::details-content` instead.
Asked and answered! Thank you.
Cool ! That is going to be awesome in 10 years when the support is better 😂😉
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!
@@KevinPowell My question is regarding implications with having those rules applied globally with the star selector. Like Adam Wathan’s infamous `min-width: 0` rule…
For some reason I can't use details::details-content { ...} I can see it in devtools but my css takes no effect. (Latest Mac OS, Latest Chrome)
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.
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?
Wonderful
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!
Using Chrome Version 130 but I can only see a details-content id on the slot, it doesn't say psuedo="details-content"? Trying to style it has no effect either. I cant work out what I am doing wrong.
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!
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??!!
Anyone know if there's a polyfill for this for current browser support?
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)
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 :)
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!
Hey Kevin! Great Video! I am big fan of the no more JS for such simple microinteraction :) juhu
❤
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 :)
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
is it only me, because chrome don't preference in the settings
For anyone who tries playing with this, Chrome 131 won't be GA until Nov 6th (2024).
Doesn't work for me
interpolate-size: allow-keywords? Makes no sense. Hopefully it'll be reworded to something more intuitive. Perhaps 'interpolate-size: interpolate;' would make more sense.
Way to complicated for a simple transition 😕