DEV Community

loading...
Cover image for Houdini

Houdini

real_sahilgarg profile image Sahil Garg ・2 min read

Introduction

Houdini is a set of low-level APIs that exposes parts of the CSS engine. Hence, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers. Also, it takes quite long for new CSS features to come to the browsers. Houdini will help bring them faster.
JavaScript-based polyfills can be used as a substitute for the lack of browser support in order to use new CSS features before they’re officially implemented. For example, scrollsnap-polyfill is one of several polyfills that can be used to fix browser support inconsistencies for the CSS Scroll Snap specification.

Advantages

Houdini enables faster parse times than using JavaScript style for style changes. Houdini's CSS Typed Object Model is a CSS Object Model with types and methods, exposing values as JavaScript objects making for more intuitive CSS manipulation than previous string based HTMLElement.style manipulations.

Disadvantages

This would look great but there are a few things to keep in mind before using it. Those are:

  1. 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. But as you extend CSS with Houdini, make sure to keep these considerations in mind.
  2. JavaScript Polyfill solutions run only after the initial render cycle has been completed, i.e. when both DOM and CSSOM have been created and the document has finished loading. After Polyfill makes changes to styles in the DOM, it causes the render process to run again and the whole page re-renders. Negative performance impact gets even more apparent if they rely on the user interactions like scroll events.

Learn it

To learn about it in a simpler manner, a great article would be: https://css-tricks.com/css-houdini-could-change-the-way-we-write-and-manage-css/#modularity

To learn it in a difficult manner

Learn more about the specifications of Houdini and worklets here:
https://developers.google.com/web/updates/2016/05/houdini#the_specifications
To explore the various APIs that Houdini provides see here: https://developer.mozilla.org/en-US/docs/Web/Houdini#The_Houdini_APIs

A recommended watch

Discussion (0)

pic
Editor guide