WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2023 • Aug 11, 2023

Is CSS Houdini finally usable in 2023?

Tanja Ulianova

CSS Houdini didn't fail; it pivoted. Leverage its three production-ready APIs to unlock type-safe properties, multithreaded painting, and up to a 30% performance boost in JavaScript style calculations.

Pause
Mute Enter Fullscreen
#1 about 2 min

Initial breakdown of the CSS Houdini ecosystem

Why CSS Houdini was introduced and how it relates to modern web development paradigms.

#2 about 4 min

Understanding the purpose behind CSS Houdini APIs

How CSS Houdini provides low-level APIs that expose parts of the browser rendering engine to developers.

#3 about 4 min

Internals of the browser rendering pipeline processing

The sequential steps browsers take to process external files and stylesheets into composite pixels on the screen.

#4 about 5 min

Upgrading variables with the CSS properties and values API

Enabling custom CSS properties with strict type safety, predictable inheritance, and robust fallback values.

#5 about 4 min

Manipulating styles with the typed CSS object model

Improving parsing performance and precision by interacting with CSS in JavaScript using typed values instead of basic strings.

#6 about 6 min

Generating off-thread graphics using the paint worklet API

How the paint worklet allows developers to produce custom lightweight bitmaps without blocking the main JavaScript thread.

#7 about 3 min

Evaluating the future utility of CSS Houdini web standards

Why modern browser vendors are prioritizing native CSS features over the complex custom layout engines originally proposed by Houdini.

#8 about 5 min

Audience Q&A on browser support and custom API capabilities

Addressing practical technical limitations including font metric tracking, data piping inside worklets, and maintaining animation loop cycles.

Matching moments

1:58 min

Generating custom backgrounds and layouts with CSS Houdini

Onur Gumus · LIVE

7:10 min

Testing CSS property knowledge and layout engine quirks

Chris Heilmann Chris Heilmann +2 · LIVE

2:04 min

Introduction to modern CSS capabilities for designers

Onur Gumus · LIVE

5:39 min

Anticipating missing CSS features and upcoming standardizations

Onur Gumus · LIVE

8:07 min

Modern JavaScript loop optimization and CSS innovations

Chris Heilmann Chris Heilmann +2 · LIVE

6:48 min

Understanding Interop 2025 and new CSS capabilities

Chris Heilmann Chris Heilmann +2 · LIVE

More from World Congress 2023

The year 3000, a brief history of Web Development thumbnail
25:30
over 2 years ago

The year 3000, a brief history of Web Development

Lorenzo Pieri

Demografie nutzen um jedem Bewerber das passende Angebot zu machen! thumbnail
8:52
almost 3 years ago

Demografie nutzen um jedem Bewerber das passende Angebot zu machen!

Nathalie Gierth

Guided Memory Management: Rust's Ownership Model thumbnail
0:18
almost 3 years ago

Guided Memory Management: Rust's Ownership Model

Stefan Baumgartner

Passwordless future: WebAuthn and Passkeys in practice thumbnail
32:32
almost 3 years ago

Passwordless future: WebAuthn and Passkeys in practice

Clemens Hübner

External Secrets Operator: the secrets management toolbox for self-sufficient teams thumbnail
30:07
almost 3 years ago

External Secrets Operator: the secrets management toolbox for self-sufficient teams

Moritz Johner

Building Reliable Serverless Applications with AWS CDK and Testing thumbnail
25:18
almost 3 years ago

Building Reliable Serverless Applications with AWS CDK and Testing

Raphael Manke

Upcoming sessions on this topic

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

Build a Zero-Cost AI Agent in Your Browser

  • Aishwarya Mathuria

    Adobe

    Computer Scientist

  • Nishant Thakur

    Adobe

    Senior Computer Scientist

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Supply Chain Security for the Everyday Engineer

  • Pradumna Saraf

    Kestra Technologies

    Quality Assurance Engineer

Open session

Beyond File Dumps: Context Engineering for Coding Agents

  • Animesh Dutta

    Arm

    Senior Software Engineer

Related videos

What's new in CSS for Designers? thumbnail
59:20
LIVE • almost 3 years ago

What's new in CSS for Designers?

Onur Gumus

WeAreDevelopers LIVE - CSS is DOOMed thumbnail
1:01:17
LIVE • 6 months ago

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Niels Leenheer

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
LIVE • 27 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

What’s New and What’s Next in Web UI thumbnail
22:46
World Congress 2024 • about 2 years ago

What’s New and What’s Next in Web UI

Cleyra Uzcategui

WeAreDevelopers LIVE - CSS is DOOMed thumbnail
59:11
LIVE • 7 months ago

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Justin Halsall, Christian Schaefer

WeAreDevelopers LIVE - CSS or BS? thumbnail
52:59
LIVE • 6 months ago

WeAreDevelopers LIVE - CSS or BS?

Chris Heilmann, Daniel Cranney, Keith Cirkel

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.