Houdini Tricks: Magic in the Future of CSS
summary
Demonstrates concrete CSS Houdini features with code and live demos: Paint Worklets to draw background images using a canvas-like API, Properties and Values to make custom properties animatable, and Layout Worklets to control child placement, all registered via the register APIs and shown running in Chrome Canary. Covers worklet isolation limits (no DOM or network), performance benefits from style maps, and the present browser support status and which pieces have landed.
AI-written summary · about
chapters (13)
- 0:00Houdini project intro
- 4:21IE6 origins and limits
- 6:05How browsers render
- 8:14Paint Worklet drawing
- 10:43Style Maps benefits
- 13:33Custom Properties limits
- 16:02Custom Property types
- 17:49Practical Houdini example
- 19:33Layout Worklet positioning
- 21:43Animation Worklet advanced
- 23:30Timeline and scroll animation
- 24:35Font Metrics and CSS Parser APIs
- 25:58Q&A
