What is CSS Houdini?
Pre-Houdini Web Development

In the pre-Houdini scenario, browsers expose a bunch of CSS properties, based on the values of which the browser renders the web-page. The list of properties available at the disposal of the web-developers is growing day-by-day as the browser-makers try to give web-developers more and more control as to how the web-pages will appear.

The impact of some of these properties is so much, that a little bit of tinkering with some of the attributes can change the look of your entire web-page. The "modern" responsive web design is also achieved through the adjustment of these property values.  Any programming with javascript is at the high-level and only to the extent of setting and altering these CSS properties and then letting the browser draw-up the desired effect.

Click for an insight into the stages of the browser's rendering process.
Web Development in Houdini

This way of developing web-pages is set to change. Engineers have come up with a concept that will let web-developers write the program code that will run at the browser's low-level as part of the rendering process, without compromising the performance. A Task Force for formed with engineers from major browser makers and web-developers. They explored the idea to expose hooks that would allow web-developers to write the low-level code that will directly perform the rendering activity and that too at CSS speeds.

To make this possible on a global scale the task-force is preparing specifications that would become W3C standards and then all major browser-makers could accept and incorporate them.

Click here to see
How much of CSS-Houdini your browser supports?
The task force had set out to do what was perceived as magic by many and hence the project got the name Houdini, after the famous magician. So, now in CSS ...
  • Houdini is a set of specs, the specs will define how web-developers can hook into the rendering engine of the browser and run their code a the low level.
  • Houdini is a task force that is preparing the Houdini specs. These are the guys that are working together to make these specs possible.
  • Houdini is a set APIs that are based on the Houdini specs.
The state of Houdini can be checked at Is Houdini Ready Yet?.

APIs under the Houdini umbrella

The APIs under the Houdini umbrella are...
  • Parser API
  • Layout API
  • Paint API
  • Animation API (earlier known as Composite API)
  • Worklet
  • Box Tree API
  • Typed OM
  • Properties and Values API
  • Font Metrics API
The Worklet came into existence so that the other APIs could exist. It is the provides the hook where you insert your code for the different APIs. The Box Tree API

Parser API, Layout API, Paint API and Animation API are the 4 higher level APIs that directly correspond to the different stages of the CSS rendering process. Similarly, Typed OM, Properties and Values API and Font Metrics API are 3 low-level APIs that help the high-level APIs perform.