ShopTalk

645: Mouthblogging CSS in 2024

Dec 9, 2024
The discussion kicks off with CSS Wrapped 2024, spotlighting significant advances in web design. Topics include new properties for text fields and animations, plus the intricacies of CSS transitions and anchor positioning. Key insights are shared on handling CSS within web components, especially concerning Safari compatibility. The speakers also dive into the creative realm of scrollbar customization and typography strategies. Scroll-driven animations are highlighted for their ability to enhance user experience, demonstrating the blend of aesthetics and performance in modern web design.
Ask episode
AI Snips
Chapters
Transcript
Episode notes
ADVICE

Field Sizing

  • Use field-sizing: content to auto-size text areas, selects, and inputs.
  • This simple CSS property eliminates the need for complex JavaScript or CSS workarounds.
INSIGHT

Animating to Height Auto

  • Animating to height: auto was previously difficult, requiring complex JavaScript and CSS tricks.
  • Now, interpolate-size: allow-keywords and calc-size enable smooth animations to and from auto heights.
INSIGHT

Anchor Positioning

  • Anchor positioning allows elements to be positioned relative to other elements, simplifying complex layouts.
  • This new CSS feature improves layout logic and offers dynamic positioning capabilities.
Get the Snipd Podcast app to discover more snips from this episode
Get the app