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.
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.
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
- Parser API
- Layout API
- Paint API
- Animation API (earlier known as Composite API)
- Box Tree API
- Typed OM
- Properties and Values API
- Font Metrics API
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.