CSS Houdini - from CSS variables to JavaScript and back
summary
Shows how to register CSS custom properties with the CSS Properties and Values API so properties become typed, validated and animatable, with JavaScript examples that update color sliders and transform values live. Demonstrates paint and animation worklets to implement GPU-friendly effects (sticky header/scroll snap in Chrome), a paint-based multi-color border polyfill that runs on demand, and measured gains (memory drops ~15→9 MB). All demos run in-browser and the APIs are polyfillable today.
AI-written summary · about
chapters (21)
- 0:00Intro
- 1:14Preprocessors
- 2:57Native CSS Syntax
- 5:38Valid examples
- 6:33Declaration and use cases
- 13:11Calculate all the app colors from the base-color (theming)
- 14:48Changes to Custom Props have immediate effect
- 16:00CSS Properties are aware of the DOM structure
- 16:57Using Custom Properties With JavaScript
- 18:12Rotate page elements using CSS variables
- 19:16Check if supported
- 23:10Introducing CSS property types?
- 24:12Houdini group
- 29:42syntax of CSS properties Examples
- 31:12Native CSS Animation
- 32:16Web animation API
- 33:05Native JavaScript animation
- 35:19Browser rendering
- 39:38Paint Worklet example
- 45:21Compositor only properties
- 48:44Timeline and animate
