Thread
What is CSS Houdini?

βž₯ What it brings to the table
βž₯ Benefits of CSS Houdini
βž₯ Examples & Resources

A Thread 🧡
CSS Houdini is a collection of browser APIs that allow us to extend the capabilities of CSS.

It includes a set of APIs that give us more control over the styling and layout of a webpage and enable hooking into the browser's rendering engine to achieve custom effects.
Houdini's specification brings two API categories:

βž₯ 𝗛𝗢𝗴𝗡-π—Ήπ—²π˜ƒπ—²π—Ή π—”π—£π—œπ˜€
βž₯ π—Ÿπ—Όπ˜„-π—Ήπ—²π˜ƒπ—²π—Ή π—”π—£π—œπ˜€
βž₯ 𝗛𝗢𝗴𝗡-π—Ήπ—²π˜ƒπ—²π—Ή π—”π—£π—œπ˜€: They have a close connection to how the browser renders pages (style β†’ layout β†’ paint β†’ composite) which includes:

βž€ Paint API
➁ Layout API
βž‚ Animation API
βž₯ π—Ÿπ—Όπ˜„-π—Ήπ—²π˜ƒπ—²π—Ή π—”π—£π—œπ˜€: They serve as a foundation for high-level APIs, which include:

βž€ Typed Object Model API
➁ Properties & Values API
βž‚ Font Metrics API
βžƒ Worklets
βž₯ Is CSS Houdini ready to use?

Here is a nice illustration of showing browser support of all the APIs by @DasSurma

Check it out yourself: ishoudinireadyyet.com/
βž₯ What it brings to the table?

One of Houdini's features is Worklets, a module written in JS, that extends CSS using one of its APIs.

They provide a way for us to define custom logic that can be used to generate or modify styles of a webpage.

E.g: houdini.how
βž₯ Benefits of CSS Houdini

β–Έ More control over styling & layout
β–Έ Improved performance
β–Έ Reusable styling modules
β–Έ New possibilities for styling and layout
β–Έ Consistency across browsers
βž₯ One of the simplest examples of CSS Houdini

Creating custom CSS properties: Yes, it uses CSS Houdini "Properties and Values" API, which we use regularly now to create our own custom CSS properties in the stylesheets.

Refer: developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API
Want to dive more?

Here comes the GitHub repo consist of almost everything related to CSS Houdini:

github.com/CSSHoudini/awesome-css-houdini
That's it for this thread. Hope you enjoyed reading something new today! πŸ™ŒπŸΌ

- Hii I'm Aakash. πŸ‘‹πŸ½
- Sharing my journey and learnings. πŸš€

If you liked it, then you can follow me, @Aakash_codes βœ“ for more such content & resources.

Thanks for the support.πŸ’œ
Mentions
See All