Houdini — CSS That Is JavaScript
summary
Houdini describes browser APIs that let JavaScript hook into the CSS rendering pipeline. The talk demonstrates Chrome Canary worklets—a paint worklet that draws background images like QR codes and gradients, and a layout worklet implementing masonry (polyfilled in JS)—and explains that worklets run off the main thread but must complete quickly (Google recommends a ~10ms budget), with some features available in Canary and others still behind flags or needing evolving polyfills.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 4:38What is Houdini
- 7:29Chrome Canary setup
- 10:15CSS styling problems
- 13:10Custom CSS properties
- 16:41Worklets concept
- 21:41Layout fragmentation
- 26:00Layout Worklet
- 27:26Scroll Timeline
- 32:24Font support in Houdini
- 33:50Summary
