Besides the beautiful name, houdini would be a great addition to web technologies when eventually implemented by browsers. Before going into what it is exactly, you can think of it as the babel of CSS. Each time I come across the name Houdini, I imagine Agent Phil Coulson saying “tahiti, it’s a magical place”.
The objective of the CSS houdini is to create an extendable CSS where everyone can add new custo features without a hassle to the language. Phillip Walton explains why CSS can’t be extended with polyfills like we do with JS today. The goal of the Houdini task force is to provide more access to the rendering pipeline on clients (Browsers, Webviews) because of the current limited access.
In a recent article I talked about container queries and how eqcss is a great solution for them. But the problem is if things already accepted into the spec take forever to be implemented, how long would it take for something that’s yet to be accepted. One of the authors of eqcss started writing a proposal for it already but it’s not close to being accepted yet. Before this there’s been GSS which may never have a future without houdini.
For some other possible houdini extensions in the wild there’s hitch that lets you create your own custom selectors, glitter which goes a step further from CSS custom properties (or CSS variables) to let you define operations on properties. Some of these things are already achievable with preprocessors but here’s how glitter may handle style extension:
.pod{
color: blue; /* #00f */
--color-filter: inverse(); /* Produces #f00 red */
}
.bay{
color: papayawhip;
--color-filter: darken(10%);
}and if you hate deriving rgb() values of hex colors when you want to add translucency with an alpha channel you can simply do that like Sass already does:
.pod{
color: rgba(midnightblue, .5);
}With these and more in the current spec it’s obvious that houdini is worth looking forward to and passing on ideas to.
In the next article I write about my thoughts on namespacing in CSS and how we may achieve it in preprocessors if accepted, and in CSS if we get importable modules, nesting, and houdini.