Is CSS Houdini finally usable in 2023?

The grand vision for CSS Houdini is gone. Discover the invaluable, production-ready tools it left behind that solve today's biggest CSS challenges.

#1about 3 minutes

What is CSS Houdini and its core purpose

CSS Houdini is a set of low-level APIs, not a framework, designed to expose parts of the browser's rendering engine for developers to extend CSS.

#2about 4 minutes

A quick overview of the browser rendering pipeline

The browser rendering process involves several key steps including parsing, styling, layout, painting, and compositing to display a webpage.

#3about 4 minutes

Creating typed custom properties with the @property rule

The Properties and Values API allows for defining typed CSS custom properties with syntax, inheritance rules, and initial fallback values.

#4about 4 minutes

Improving performance with the Typed CSS Object Model

The Typed CSS Object Model provides a more performant, typed way to manipulate CSS properties in JavaScript, avoiding expensive string parsing.

#5about 5 minutes

Drawing custom graphics with the Paint API Worklet

The Paint API allows developers to programmatically generate images off the main thread using a Worklet, which can then be used in CSS properties like background-image.

#6about 3 minutes

The current state and future of CSS Houdini

While some Houdini APIs are usable, the more complex Worklets are unlikely to be implemented as browser vendors now prioritize shipping native CSS features.

#7about 5 minutes

Audience Q&A on Houdini implementation details

Questions from the audience cover topics like font metrics, passing data to Worklets, animating with the Paint API, and the complexity of unreleased APIs.