New CSS features in 2024.

🔴 Patreon: https://www.patreon.com/joyofcode
 𝕏 Twitter: https://twitter.com/joyofcodedev
💬 Discord: https://discord.com/invite/k6ZpwAKwwZ
🔥 Uses:  https://www.joyofcode.xyz/uses

🔗 CSS Wrapped 2024: https://chrome.dev/css-wrapped-2024/
🔗 CSS Wrapped 2023: https://developer.chrome.com/blog/css-wrapped-2023
🔗 Browser Market Share: https://gs.statcounter.com/
🔗 Zen Browser: https://zen-browser.app/
🔗 Learn CSS: https://web.dev/learn/css
🔗 The CSS Podcast: https://thecsspodcast.libsyn.com/

🔖 Timestamps

0:00 Intro
1:49 Field Sizing
2:20 Animate Intrinsic Sizes
3:13 Exclusive Accordion
3:36 Styleable Details
5:15 Anchor Positioning
6:42 Custom Scrollbars
7:16 Cross-Document View Transitions
10:20 Scroll-Driven Animations
10:54 Scroll Snap Events
12:34 Backdrop Inheritance
13:03 Light And Dark Theme Function
14:25 Typed CSS Properties
15:35 The Popover API
16:05 Entry Effects With @starting-style
17:08 Paint Order
17:50 CSS Learning Resources
18:23 The CSS Podcast
18:29 Outro

#joyofcode #sveltekit #svelte

Joy of Code

2024 has introduced a multitude of new CSS features, making it easier to integrate different elements and create more interactive designs without relying heavily on JavaScript. Notable features include native support for nesting, field sizing, animate-to-hide, scroll-driven animations, and exclusive accordions. View transitions and anchor positioning are also enhanced for better user experiences. These advancements mark a shift towards more efficient and performant front-end development using CSS.

More Modern CSS Features You Should Know About