CSS Houdini - from CSS variables to JavaScript and back
summary
CSS Custom Properties now live in major browsers and CSS Houdini adds a JavaScript API to registerProperty with type, initial value and inheritance so variables become typed and animatable. The ecosystem exposes paint worklet, layout worklet and animation worklet to run small ESM worklets off the main thread. Demos include RGB sliders, a multiborder painter, and a scroll-position line; measuring one animation drops CPU usage roughly in half and reduces memory from ~15–28MB to ~8–21MB.
AI-written summary · about
chapters (37)
- 0:00Start
- 0:46About me
- 1:39Preprocessors
- 3:22Native CSS Syntax
- 4:34Declaration and usage
- 5:38Valid examples
- 6:28Declaration and use cases
- 7:43CSS-Wide Keywords
- 9:50Operations: +, -, *.
- 11:41Calculate all the app colors from the base-color (theming)
- 12:56Changes to Custom Props have immediate effect
- 13:45CSS Properties are aware of the DOM structure
- 14:28Using Custom Properties With JavaScript
- 15:31Rotate page elements using CSS variables
- 16:16Check if supported
- 17:22Current constraints
- 18:11Why animation is important
- 18:34Why typed CSS properties and values are important
- 19:22Introducing CSS property types?
- 20:10Houdini group
- 21:57CSS Properties Values API
- 23:00CSS Properties and Values API 2 @property --stop-color
- 24:13"syntax" of CSS properties
- 26:03Native CSS Animation
- 26:51Web animation API
- 27:56Native JavaScript animation
- 29:03CSS/JS/Browser
- 29:52Browser rendering
- 34:38Paint Worklet example
- 42:25Compositor only properties
- 43:18Animation Worklet-CSS/JS parts
- 44:01Animation Worklet itself
- 44:55Timeline and animate
- 46:05Animation Worklet result
- 46:30endScrollOffset option
- 46:53New Twitter Header effect using Animation Worklet
- 47:51Consclusions
