Design System Magic with CSS Houdini
summary
Explains concrete Houdini features and how to use them: worklets (paint, layout) run at render-engine speeds; paint worklet demos draw generative backgrounds and a ripple button with about 15 lines of JavaScript; a circular layout is ~40 lines and a masonry layout is ~45 lines with no deps; Typed OM and CSS.registerProperty let custom properties carry types and enable transitions; some APIs are usable today with polyfills and CSS post-processing, while others still require experimental browsers.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 0:46What is CSS Houdini
- 2:44Worklets
- 6:07Custom Properties
- 10:37Paint API
- 13:33Web Component
- 17:18Layout API
- 23:35Demo
