Animate HTML Details & Summary Elements Using Pure CSS

Рет қаралды 2,089

Күн бұрын

Find out how to fully animate the HTML Details/Summary disclosure widget using only CSS, including the Summary marker arrow rotate, and height transition to open/close the element content.
You’ll learn how to inspect the Shadow DOM of native HTML elements, how the calc-size() function works, why you need transition-behavior property to animate content-visibility, how to connect multiple HTML Details elements, and more.
🔗 Links
Demo: codepen.io/ZoranJambor/pen/jO...
Transition to "height: auto;" Using Pure CSS: • Transition to "height:...
DevTools Tips: • Chrome DevTools Tips -...
Logical CSS Properties: • In-Depth Guide to CSS ...
Individual CSS Transform Properties: • Create Complex Transit...
Experimental Web Platform Features: • How to enable experime...
marker on MDN developer.mozilla.org/en-US/d...
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Help support my channel
👨‍🎓 Get a course: masteringlinting.com/
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: / cssweekly
📖 Chapters
00:00 About HTML Details & Summary element
01:26 Style HTML Details disclosure element using CSS
02:40 Inspect HTML Details Shadow DOM in DevTools
03:55 Utilize HTML Details pseudo-elements
05:10 Animate HTML Details open/close using calc-size()
07:00 Use transition-behavior: allow-discrete; to animate content-visibility
08:58 Browser support for calc-size() & transition-behavior: allow-discrete;
10:04 Animate HTML Summary Arrow marker
15:01 Connect multiple Details elements
15:59 Open Details disclosure widget by default
16:25 Browser support for HTML Details “name” attribute
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: / zoranjambor
- Zoran Jambor
#css #htmldetails

Пікірлер: 30

@Killyspudful Ай бұрын

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.

@CSSWeekly Ай бұрын

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. 🙂

@MyDpop Ай бұрын

connecten by name is just brilliant ! 🤓

@CSSWeekly Ай бұрын

Indeed it is, Daniel! I wasn't even aware it was possible until researching this video. 🙂

@clevermissfox Ай бұрын

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.

@CSSWeekly Ай бұрын

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. 🤞

@clevermissfox Ай бұрын

@@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 ☺️

@CSSWeekly Ай бұрын

Thanks for your suggestions about using it in Flexbox and Grid contexts! I'll do my best to cover as possible. 🙂

@talatkuyuk6556 Ай бұрын

You are awesome, so nice, detailed and organized explanations, thank you very much.

@CSSWeekly Ай бұрын

That is such a wonderful compliment, Talat! Thank you so much; it means a lot! 🙏

@ahmad-murery Ай бұрын

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!

@CSSWeekly Ай бұрын

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! 🙏

@FlyingPenguino Ай бұрын

This is amazing :O

@CSSWeekly Ай бұрын

Thanks so much! 🙏

@FelquisGimenes Ай бұрын

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

@CSSWeekly Ай бұрын

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. 🙂

@virajshukla2584 Ай бұрын

as a workaround for now you can make it a grid and transition grid-template-rows from minmax(0, 0fr) to minmax(0, 1fr)

@CSSWeekly Ай бұрын

Precisely, Viraj! This is a solid cross-browser solution! 🙂

@jouni- 15 күн бұрын

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.

@CSSWeekly 14 күн бұрын

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. 😔

@florentd.5817 Ай бұрын

Read somewhere that is not possible to add a small transition effect in pure css ? Do you agree with this point ? Thanks.

@CSSWeekly Ай бұрын

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?

@jenstornell Ай бұрын

This is a big thing for the web. In a perfect world js should not be used for simple stuff like this.

@CSSWeekly Ай бұрын

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. 🙂

@FlyingPenguino Ай бұрын

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 🤢

@CSSWeekly Ай бұрын

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. 🙂

@lvekua 12 күн бұрын

Animation doesn't work has there been an update or something?

@futuremoe 12 күн бұрын

Same for me, I tried it in the lastest Chrome Canary. I couldn't find CSSCalcSizeFunction in the flags list

@CSSWeekly 12 күн бұрын

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. 🤔

@CSSWeekly 12 күн бұрын

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