How to be Houdini and escape the limits of CSS

Harnessing the power of some cool new APIs to unlock the power of the web

Seth Corker
Nov 26, 2018 · 4 min read
Image for post
Image for post
Using border-radius in Firefox (left), mask-image created with CSS Paint API in Chrome (right)

What is Houdini and why should I care?

What will Houdini give me access to?

Allowing the browser to handle CSS related tasks will mean more performant execution. Looking at the direction of increasing rendering performance, Mozilla is working on Servo which utilises the GPU for performing rendering tasks and thus freeing up the CPU for script execution.

An example using the CSS Paint API

Image for post
Image for post
What the squircle mask looks like in Chrome

If you’ve done anything using the Canvas API, you already have a head start. To create a worklet, we create a JavaScript class called squircle . We can then define out paint function which takes the canvas context, the dimensions of the element and any other properties we might want to use.

Finally, we call registerPaint() with a name and the class we just created. This allows us to use it in CSS with paint(squircle) and can be used anywhere we would normally use a url() in CSS.

The icons have a CSS class that uses the mask-image property to mask the background image. Thanks to https://picsum.photos/ for the easy to use image lorem ipsum.

The basic squircle renderer

Checking for browser support can be done with a simple check like so:

Image for post
Image for post
Checking for CSS Paint Worklet support in JS

Similarly with CSS we can use the @supports rule to check if we can use our paint worklet or if we should just fallback to another method.

Image for post
Image for post
Checking if the browser supports CSS Paint with the @supports rule

Take a look at the source code, it’s very brief and is an easy way to get started. The demo is also available, remember to use a browser that support the Paint API.

How can Houdini be used today, will it work in my browser?

If your browser is Google Chrome then probably. Houdini is very much a work in progress and thus browsers are still deciding how to approach the standards.

Browser support is almost non existent but it’s not all bad news. As of November 2018, Chrome and Opera have the best support with the CSS Paint and CSS Typed Object Model APIs. Chrome Canary is the best option for development as the Google Chrome team has been implementing draft W3C standards very quickly while the other vendors seem to be waiting for the standards to stabilize.

Apple is working on the Paint API for Safari and Mozilla have signaled intent to implement some of the APIs in Firefox.

The best way to see what each browser is up to, check out https://ishoudinireadyyet.com/ by Surma. It’s an easy to evaluate matrix showing major browser support and it’s updated regularly.

Should I use it?

I can’t recommend using the APIs in production. It is very cool to tinker with, however, there is a lot of great material put out by https://developers.google.com/web/ which goes over some of the APIs more in depth. Once browser support is better, I think Houdini may be useful for improving performance of frameworks and getting into more low-level optimizations. The possibilities are really just opening up and it’s difficult to predict what can be created until developers get some more time (and reason) to play with it.

Benevolent Bytes

Thoughts, stories and ideas about development.

Seth Corker

Written by

Sharing ideas, facts, and opinions about programming. 📚 Learn more React and JavaScript. 🗺 Learn web development tips and tricks 🛸 Discover something new

Benevolent Bytes

Thoughts, stories and ideas about development. Web development and beyond.

Seth Corker

Written by

Sharing ideas, facts, and opinions about programming. 📚 Learn more React and JavaScript. 🗺 Learn web development tips and tricks 🛸 Discover something new

Benevolent Bytes

Thoughts, stories and ideas about development. Web development and beyond.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store