From CSS variables to JavaScript and back

on YouTube ↗42m

" summary

Shows how to register CSS custom properties from JavaScript using the Houdini registerProperty API, with demos that make variables animatable and run on the compositor for frame-perfect performance. Presents working examples (color, border size, scroll-driven meters), compares a polyfill vs native behavior, and reports that native support (Chrome) moves animations off main thread so CPU drops and smoothness improves. Notes browser support gaps and a practical progressive-enhancement approach.

AI-written summary · about

" chapters (9)

1. 0:00Introduction to CSS bridge
2. 2:02CSS custom properties basics
3. 6:19Houdini and browser APIs
4. 10:02Real-time CSS updates
5. 19:02Houdini task force
6. 25:41CSS object model
7. 30:23JavaScript and CSS interaction
8. 35:20Performance and compositing
9. 40:39Future of CSS properties

" related talks

• 53mCSS Houdini - from CSS variables to JavaScript and backSerg Hospodarets · NDC Oslo 2017
• 53mCSS Houdini - from CSS variables to JavaScript and backSerg Hospodarets · Frontend United 2017
• 46mGetting extra with CSS HoudiniUna Kravets · Frontend United 2019
• 27mMagic Tricks with HoudiniSamuel Richard · Nordic.js 2018
• 37mCSS Custom PropertiesMichelle Barker · SmashingConf Live 2020
• 38mDemystifying CSS Custom PropertiesJean-francois Garreau, Audrey Garreau · DevFest Paris 2019
• 48mHoudini - New Era of CSSVidit Anjaria, Saket Kumar · DrupalCon Amsterdam 2019
• 18mDemystifying CSS Custom PropertiesJean-francois Garreau, Audrey Garreau · DevFest du bout du monde 2019