Neon DistrictISSUE #45 of 50

css houdini · paint api · worklet

PrismaVSJank the Janitor

Prisma saysCSS Houdini (Paint API and worklets) lets JavaScript draw custom CSS values and backgrounds.

Houdini exposes CSS internals to JS. The Paint API registers a paintWorklet that draws a background programmatically (background: paint(myWorklet)). Other worklets handle layout and animation. Powerful and forward-looking, though support is uneven — treat as progressive enhancement.

Power-ups you unlock

Houdini exposes CSS internals to JavaScript
Paint API: background: paint(worklet)
Also layout & animation worklets
Cutting-edge — progressive enhancement

Jank the Janitor attacks — common mistakes

Relying on Houdini without a fallback
Heavy paint worklets hurting performance
Assuming universal browser support

Boss battleRead the Paint API shape: registerPaint + how the CSS references it.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>body{background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px}</style></head><body><pre>registerPaint('checker', class {
  paint(ctx, size){ ctx.fillStyle='#b388ff'; ctx.fillRect(0,0,size.width/2,size.height); }
});
/* css: .box { background: paint(checker); } */</pre></body></html>

▶ Open the interactive comic issue

‹ Nesting · Native Css Nesting Methodology · BEM · SMACSS · Utility-First ›