CSS Houdini & The Future of Styling

on YouTube ↗26m

" summary

Houdini promises direct JS-driven CSS by exposing the CSSOM and shipping a paint worklet and a typed object model so browsers can parse and interpolate values natively. The demo registers registered properties to animate color interpolation, shows a paint worklet generating ~30 sparkles, and notes a stage failure with a working backup. A polyfill exists and an extra.css library wraps common patterns; Chrome Stable (and recent Edge) run these features today.

AI-written summary · about

" chapters (12)

1. 0:00Intro
2. 0:37Form Styling
3. 3:27Houdini
4. 5:23Typed Object
5. 7:02Properties Values API
6. 8:01Color Stop
7. 10:27Service Workers
8. 13:04Material Design
9. 14:04Masking
10. 14:58Warnings
11. 15:26Canvas
12. 22:05Extra CSS

" related talks

• 35mCSS Houdini TodayUna Kravets · Full Stack Fest 2019
• 24mHoudini the new CSS MagicKarsten Buckstegge · JSUnconf 2018
• 22mCSS HoudiniNegar Jamalifard · JSWorld Conference 2022
• 46mGetting extra with CSS HoudiniUna Kravets · Frontend United 2019
• 42mHow to Be #Extra with CSS HoudiniUna Kravetz · YGLF 2019: Code Camp
• 53mCSS Houdini - from CSS variables to JavaScript and backSerg Hospodarets · NDC Oslo 2017
• 48mHoudini - New Era of CSSVidit Anjaria, Saket Kumar · DrupalCon Amsterdam 2019
• 27mMagic Tricks with HoudiniSamuel Richard · Nordic.js 2018