CSS Houdini is an umbrella term that describes a series of low-level browser APIs that give developers much more control and power over the styles they write.
It also introduces paint, layout, and animation worklets, which open up a world of possibilities, by making it easier for authors to hook into the styling and layout process of the browser's rendering engine.
Understanding Houdini worklets #
Write worklet file Register worklet module (
CSS.paintWorklet.addModule(workletURL)) Use worklet (
Implementing your own features with the CSS Painting API #
The CSS Painting API is an example of such a worklet (the Paint worklet), and enables developers to define canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more. There is a whole world of possibilities for how you can use CSS Paint in your own user interfaces.
For example, instead of waiting for a browser to implement an angled borders feature, you can write your own Paint worklet, or use an existing published worklet. Then, rather than using border-radius apply this worklet to borders and clipping.