Skip to content
Malouf Developer Docs

CSS Houdini

The next step in CSS

Houdini boils down to access to the CSS_Object Model (CSSOM). We are able to hook onto a browser’s rendering engine and insert our own custom CSS. A lot of the things Houdini is capable of could be accomplished before, but with much more difficulty and considerably longer load times. The CSS Working group have been slow to implament these API’s though. They have strived for a long time to keep CSS secure and safe to use and “opening the hood” of the browser’s rendering engine could lead to some vaulnerablities. Hence, why it’s taking so long. I’ve linked a chart that stays “relatively” up to date below

The main way we’ll be inserting into CSS would be through Worklets. These are what allow us to import our own modular CSS functions withouth the need of pre/post-processors or JavaScript Frameworks. You can find a library of worklets that people have already developed here

“Note: With great power comes great responsibility! With Houdini you could invent your own masonry, grid, or regions implementation, but doing so is not necessarily the best idea. The CSS Working group does a lot of work to ensure every feature is performant, handles all edge cases, and considers security, privacy, and accessibility. As you extend CSS with Houdini, make sure to keep these considerations in mind, and start small before moving on to more ambitious projects.” -Mozilla Developer

Support

Houdini API’s

Properties and Values API

Basically, CSS variables 2.0. Not only can we define custom variables, but we can state initial values, the variable type, and more. To access these, use @property --varName {} within your CSS.

@property --myColor {
    syntax: '<color>',
    inherits: false;
    initial-value: #FFFFFF;
}

In this example, The Browser understands that var(--myColor) is a color and treats it no different than any other HEX or RGB. Before, if you tried to transition between two of these variables, you would get a sudden jump to the next color rather than a smooth transition since the browser didn’t understand what it was dealing with.

  • There is no way to update a variable defined this way, you will recieve an error of already defined.
  • Invalid properties won’t appear as invalid in the inspector
  • An Invalid property won’t fall back to a valid one if inserted after (however it can still fall back to its registered default)
    • EX: --myColor won’t fall back to #FFFFFF but may still fall back to a default if defined with @property.
--myColor:#FFFFFF;
--myColor: 12;

Typed OM

Javascript works with CSS! CSS variable are no longer treated as strings and are in need of string-based manipulation. Instead, they are now JavaScript Objects. This really simplifies CSS manipulation in Javascript and it has been reported that on average, the decrease in load times is roughly ~30% faster than before.

Painting API

One of the main ways, currently, to use Worklets. The painting API allows us to create custom values for the paint() function.

To do this:

  • create a seperate Javascript file with your function placed insided,
  • Load in the CSS using <script> tags
<script>
  if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('checkerboard.js');
  }
</script>
  • Implement into your CSS
textarea {
    background-image: url(checkerboard);
    background-image: paint(checkerboard);
}

Animation Worklet API

Browser Support

In Development

The Animation Worklet API is an extension of what features we already have. Previously, animations and transitions were mostly “time-based” but now, you can trigger animation sequences based on events and states too!

  • EX: When you scroll down the page, a div moves to the right. Scroll up the page and it’ll move to the left

Layouts API

Browser Support

In Development

The Layouts API is another Worklet that allows you to create your own layouts instead of using Flex-box or Grid.

  • Think Masonry Layouts, Random size Layouts, etc.

Parser API

“The goal of this specification is to allow authors access to the engine’s parser. There are two over-arching use cases:

  • Pass the parser a string receive and receive an object to work with instead of building custom parsing in JS.
  • Extend what the parser understands for fully polyfilling”

Parser API Proposal

Font Metrics API

An API exposing font metrics, giving access to typographic layout results. This would allow you to ascertain data and values that are already being calculated by the browser.

  • EX: align-items: baseline needs to calculate where the baseline of each flex item lands. ← access to that data

Font Metrics Proposal

Resources

Is Houdini Ready Yet?

Houdini.how

CSS Houdini - Developer guides | MDN (mozilla.org)

Font Metrics Proposal

Parser API Proposal

<style>
    .ready-yet {
        border: none;
        width: 100%;
        aspect-ratio: 3/2;
    }
</style>