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.

let pos = new CSSPositionValue(
new CSSUnitValue(5, "px"),
new CSSUnitValue(10, "px"));
name: "--my-color",
syntax: "<color>",
initialValue: "black"

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.

Learn more about Houdini:

web developer obsessed by making web better ( focused on web perf and a11y )

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store