Do It With Style: Rethinking CSS
summary
Shows how to replace common JS widgets with real HTML and modern CSS: an details/summary accordion becomes mutually exclusive via the name attribute (landed end of 2024), transitions to auto size work when opting into the interpolate-size keyword, and keyframe+custom property animations drive live hue rotation. Demonstrates using OKLCH color space plus conic gradients and background-blend-mode to generate balanced palettes and tint images, and explains styled select pickers (radial-select demo runs in Chromium today; Safari/Firefox degrade).
AI-written summary · about
chapters (11)
- 0:00CSS introduction and challenges
- 6:12Reconsider CSS now
- 12:50CSS features and browser support
- 18:08Interactive accordions with CSS
- 21:17CSS transitions and animation limits
- 29:03Modern CSS color models
- 37:06Advanced CSS animations
- 41:42Dynamic color palettes
- 47:22Styling select elements
- 52:37Future of CSS standards
- 55:21Workshops and resources
related talks
47mCSS Rises from the Ashes: (Re)Make Friends with Your Stylesheet
34mDon't Use JS for That: Moving Features to CSS and HTML
36mStop using JS for that: moving features from JS to CSS & HTML
51mWeb Design Engineering With the New CSS
43mCSS is Awesome!
53m"State of CSS 2024"
01h 00mThe CSS You Don’t Know About
40mStop using JavaScript for that - Moving features from JS to CSS and HTML