Houdini Tutorial: CSS Painting and Custom Properties (Video)

01-21-19 Nate Jacobs

Watch Nate's video tutorial on how Houdini gives developers the power to extend CSS, including how to use two recently available APIs: "CSS Paint" and "Properties and Values."

Houdini is the name of both a W3C task force and a set of CSS-oriented web APIs created to allow authors to extend and enhance the platform. More specifically, the APIs provide hooks into the rendering cycles that run in every web browser, giving us the ability to customize the features of CSS.

Have you read the Extensible Web Manifesto? If not, I would encourage you to give it a quick look. Don’t worry, it’s succinct. From said manifesto, the closing excerpt resonates:

“In order for the open web to compete with its walled competitors, there must be a clear path for good ideas by web developers to become part of the infrastructure of the web. We must enable web developers to build the future web.”

Houdini is so exciting because it does just that. It enables developers to become part of the web infrastructure by opening a new feedback loop between web authors and web-specification authors.

Interested in learning more about how Houdini expands the power and capabilities of CSS? I put together this video walk-through of a couple recently available APIs: “CSS Paint” and “Properties and Values.” Enjoy the tutorial and reach out if you have any questions.