Magic Tricks with CSS Houdini

on YouTube ↗39m

" summary

CSS Houdini lets JavaScript plug into the browser render engine via tiny background threads called worklets, with concrete pieces: paint worklet (draw scalable canvas-like images; demo circle works in Chrome Canary with flags), CSS.registerProperty plus Typed OM (typed style values and animatable custom properties), an animation worklet tied to a scroll timeline (off-main-thread parallax demo works in Canary), and a full Layout API (complex spec, few/no implementations yet). Support is experimental, Chrome Canary furthest along, syntax and APIs still changing.

AI-written summary · about

" chapters (7)

1. 0:00Introduction to Houdini
2. 4:14Understanding worklets
3. 6:58The Typed OM
4. 9:42Custom CSS properties
5. 13:15The Paint API
6. 17:26CSS Animation API
7. 23:26CSS Layout API

" related talks

• 36mMagic Tricks with CSS HoudiniSamuel Richard · Full Stack Fest 2017
• 26mHoudini Tricks: Magic in the Future of CSSMassimo Artizzu · CSS Day 2019
• 31mMagic tricks with HoudiniSamuel Richard · CSSConf AU 2018
• 27mMagic Tricks with HoudiniSamuel Richard · Nordic.js 2018
• 36mHoudini — CSS That Is JavaScriptNikita Dubko · OdessaJS 2018
• 24mHoudini the new CSS MagicKarsten Buckstegge · JSUnconf 2018
• 42mHow to Be #Extra with CSS HoudiniUna Kravetz · YGLF 2019: Code Camp
• 48mHoudini - New Era of CSSVidit Anjaria, Saket Kumar · DrupalCon Amsterdam 2019