Houdini is like Babel but for CSS
or what I learned about Houdini after spent a week reading the current specification.
What is Babel
If you have done any web development for last few years you probably used ( or at least heard ) about Babel. It’s JavaScript transpiler which gives you the ability to write a modern version of JavaScript which runs in browsers doesn’t support it yet. Babel is one of the reasons of the big javascript evolution in last few years. The transpiler gives you powers to create proof of concept of certain language feature/specification, to test by real developers in real projects, receive quick feedback and iterate over a it. There are plenty of good examples of that with features like async/await and decorators.
What is Houdini
Houdini is a new set of browser APIs which give access to browse internals, more specifically to CSS engine. The first version of specifications ( !!! it is still draft !!! ) describes Layout API, Painting API, Parser API, Typed Object Model, Font Metrics and Properties and Values API.
Layout API: adds ability to create custom display property ( display: layout(‘myCustomLayout’) ), for example you can create own display flex or grid. From my understanding the API will provide information about geometric data, position, size of the child, parent and current elements, available space in container etc.
Painting API: the current specification will allow you to paint own border, background image, in a future version could be added support for clip, alpha and filters. Basically, the API gives you access to kind of canvas API in which you can paint every frame.
Parser API: basically, the idea is to pass a string to the parser, and to receive an a object ( I guess kind of abstract syntax tree, similar to babel parser ?).
Typed Object Model: Adds types to CSS, that API is going to resolve the problem with parsing string values from CSS.
let pos = new CSSPositionValue(
new CSSUnitValue(5, "px"),
new CSSUnitValue(10, "px"));Font Metrics: as name suggest that is an API which provides methods for measuring text.
Properties and Values API: is the same as CSS custom properties ( CSS variables ) the only difference I see is the possibility to add types of the property.
CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
initialValue: "black"
});Is good to mention that Layout and Painting API will run in a Worklet, which is kind of Web Worker so they are independent from main thread.
How Houdini compares to Babel
I believe Houdini will have the same impact to CSS as Babel to JS. Developers will start to create custom CSS properties and a new type of layout. Houdini will give the ability for much more experiments and easy way for creating prototypes.
Let’s see an example with Masonry Layout, imagine someone decides to make custom masonry layout, create beautiful and easy to use API around it and suddenly developers around the world start using it ( even more than today’s JS plugin ). That will push people in W3C to make a specification and browser vendors can ship it natively.
Another example is CSS Grid, do you know how long took from the first spec draft to the first release in all browsers? Around 5 years, sorry to write that but is too long. I strongly believe that Houdini will solve the problem with iterations and creating prototypes, can push the web in direction which developers want.
Currently, some of Houdini specifications are implemented in Chrome Canary behind the “Experimental Web Platform features” flag.
