Tanja Ulianova

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.

Is CSS Houdini finally usable in 2023?
#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.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Extending CSS capabilities with the Houdini Paint API
35:57 MIN

Extending CSS capabilities with the Houdini Paint API

What's new in CSS for Designers?

Discussion on the evolution and future of CSS
41:29 MIN

Discussion on the evolution and future of CSS

What's new in CSS for Designers?

Exploring the potential of future web APIs
00:16 MIN

Exploring the potential of future web APIs

Explore new web features before everyone else

Analyzing the new Web Readiness Report and modern CSS
32:17 MIN

Analyzing the new Web Readiness Report and modern CSS

WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more

Q&A on CSS history, design, and print standards
28:35 MIN

Q&A on CSS history, design, and print standards

How to write a book with CSS

Understanding the proposed Style Observer JavaScript API
12:53 MIN

Understanding the proposed Style Observer JavaScript API

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Rediscovering HTML elements and upcoming CSS features
42:30 MIN

Rediscovering HTML elements and upcoming CSS features

WeAreDevelopers LIVE - Can AI save Accessibility?; Horrid HTML; The Frontend Treadmill and more

Introducing modern zero-runtime CSS-in-JS libraries
09:18 MIN

Introducing modern zero-runtime CSS-in-JS libraries

Component styling in a JS world — evolve your mental model

Featured Partners

Related Videos

See all videos
What’s New and What’s Next in Web UI22:46

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

Cleyra Uzcategui

How to write a book with CSS40:25

How to write a book with CSS

Håkon Wium Lie

Can CSS recreate Tufte's designs?28:00

Can CSS recreate Tufte's designs?

Håkon Wium Lie

Future-Proof CSS37:55

Future-Proof CSS

Ire Aderinokun

What's new in CSS for Designers?59:20

What's new in CSS for Designers?

Onur Gumus

Component styling in a JS world — evolve your mental model41:28

Component styling in a JS world — evolve your mental model

Maximilian Heinrich

Explore new web features before everyone else44:43

Explore new web features before everyone else

Nikita Dubko

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
DC
Daniel Cranney
Creating a Spotlight Text Effect with CSS and JavaScript
Every now and then it’s fun to build something small just to get a better grip on a concept, and this one’s a great example. We’ll explore how to make a simple spotlight text effect that helps you understand how to follow the cursor, use CSS variable...
Creating a Spotlight Text Effect with CSS and JavaScript
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript

From learning to earning

Jobs that call for the skills explored in this talk.

Creative Javascript

Creative Javascript

Thegiglab
Amsterdam, Netherlands

Intermediate
API
CSS
HTML
jQuery
Bootstrap
+1