Explore CSS Houdini worklets, the Paint API, registerProperty, and CSS Typed OM for extending the browser rendering pipeline.
0 / 5 completed
1 / 5
What is the CSS Houdini Paint API used for?
CSS Paint API (Houdini): you call CSS.paintWorklet.addModule("painter.js") and define a class with a paint(ctx, geom, props) method. The browser calls this function whenever it needs to paint the element's background, giving you a 2D canvas API within the rendering pipeline.
2 / 5
What does CSS.registerProperty() enable that plain CSS custom properties cannot do?
registerProperty: plain --color: red is just a string to CSS. With CSS.registerProperty({ name: "--hue", syntax: "<angle>", inherits: false, initialValue: "0deg" }), the browser understands it as an angle and can tween it smoothly in a CSS animation.
3 / 5
What is a CSS Houdini worklet and how does it differ from a Web Worker?
Worklet: unlike a Worker, a worklet is tightly integrated with the rendering engine's thread. It intentionally has no access to the DOM or full Web APIs to keep the rendering pipeline predictable and jank-free. Different worklet types (paint, layout, audio) each have their own scope.
4 / 5
How do you pass CSS custom property values into a paint worklet?
inputProperties: returning ["--border-color", "--ripple-radius"] from the static getter tells the browser to collect those custom property values from the element's computed style and pass them as the props argument to your paint() method.
5 / 5
What is the CSS Typed OM and why is it part of the Houdini project?
CSS Typed OM: instead of element.style.opacity = "0.5" (a string), you write element.attributeStyleMap.set("opacity", CSS.number(0.5)). Typed values avoid string parsing overhead and prevent invalid values, and they are required by Houdini worklets for property access.