Animate HTML Details & Summary Elements Using Pure CSS
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: https://codepen.io/ZoranJambor/pen/jO...
Transition to "height: auto;" Using Pure CSS: • Animate to "height: auto;" & "display...
DevTools Tips: • Chrome DevTools Tips – Styles Pane & ...
Logical CSS Properties: • In-Depth Guide to CSS Logical Properties
Individual CSS Transform Properties: • Create Complex Transitions With Indiv...
Experimental Web Platform Features: • How to enable experimental CSS & JS f...
marker on MDN https://developer.mozilla.org/en-US/d...
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
Help support my channel
👨🎓 Get a course: https://masteringlinting.com/
🪧 Buy a CSS sticker pack: https://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: https://zoranjambor.com
💼 LinkedIn: / zoranjambor
Zoran Jambor
#css #htmldetails
On this page of the site you can watch the video online Animate HTML Details & Summary Elements Using Pure CSS with a duration of hours minute second in good quality, which was uploaded by the user CSS Weekly 07 June 2024, share the link with friends and acquaintances, this video has already been watched 3,866 times on youtube and it was liked by 215 viewers. Enjoy your viewing!
