If you’re not familiar, Houdini is a set of specifications designed to fundamentally change how developers use CSS going forward. It’s designed to open up some of the magic that browsers do on our behalf, so we can optimise it best for our use-cases. Eventually that will cover things like fonts and layout, but for now we’re starting to see the first small morsels that will be built on for the future.
All of Houdini’s specs will work with what are called “Worklets” - small, highly specified classes that are really good at doing one job repeatedly. They work away from the main thread, which means no direct DOM manipulation, but means they can run nice and quick without reducing how well the page performs.
If you’re thinking “Wait, they sound a lot like web workers…” then you’re not wrong. Worklets are just highly specialised web workers doing the work of certain aspects of styling for the browser.
The CSS Paint API is a based around the
PaintWorklet that - just as it sounds - deals with painting of things in the browser. By using a context similar to when working with
<canvas> elements we can paint anything we want and have CSS use it just like any other image.
This tutorial plays around with a couple of ideas - one that generates an interactive background image, while the other takes things a step further with the relatively new
image-mask property to dynamically show and hide an image. It’s all great fun.
Here’s a preview of the sort of thing you’ll be making (assuming you’re on a browser that supports it, like Chrome 65):
But I digress. The CSS Paint API is a lot of fun and it’s going to completely change the way we work with CSS. It’s worth picking up a copy of Web Designer and getting in on the ground floor. It’s a lot of fun!