Houdini - New Era of CSS
summary
Explains how CSS Houdini lets code register real CSS properties and hook into the engine via worklets so styles run at CSS speed: registers a color property to animate gradients smoothly, uses Properties and Values API plus Typed OM to cut a demo update from ~0.83ms to ~0.5ms, builds a scroll-driven animation via the Animation worklet, creates custom layouts (masonry) with the Layout API, and draws tooltips and custom checkboxes with a Paint API worklet; notes APIs are experimental and need flags/localhost.
AI-written summary · about
chapters (20)
- 0:00Houdini
- 0:30What is Houdini
- 0:57Houdini API
- 1:50How CSS works
- 3:14Why CSS
- 5:28Challenges
- 11:12Typed API
- 12:17Demo
- 13:58Web Workers Worklets
- 17:41Layout API
- 18:57Custom Layout
- 20:32Layout Fragment
- 21:55Animation API
- 22:30Current Animation API
- 25:49Main Scroller
- 26:47Paint API
- 33:11Limitations
- 33:40Houdini State
- 34:48CSS Preprocessor
- 36:35Browser Support
related talks
27mMagic Tricks with Houdini
42mHow to Be #Extra with CSS Houdini
26mHoudini Tricks: Magic in the Future of CSS
33mHoudini: The magic of CSS and JavaScript
27mDesign System Magic with CSS Houdini
53mCSS Houdini - from CSS variables to JavaScript and back
35mCSS Houdini Today
46mGetting extra with CSS Houdini