CSS Houdini: What is it and what is special about it?

CSS Houdini

In recent years, web development has entered a new dimension in terms of versatility and possibilities, above all thanks to the integration of functionalities that were previously only possible using external frameworks , but which are now part of the CSS engine.

One of these features is CSS Houdini , a group of APIs that allows you to do magic . :)

 

What is CSS Houdini?

 

CSS Houdini is a set of low-level APIs that expose parts of the CSS engine, giving you the power to extend CSS. CSS Houdini connects with the styles and design process of a browser rendering engine .

Therefore, CSS Houdini is a group of APIs that gives developers direct access to the CSS Object Model ( CSSOM ). This allows developers to write code that the browser can parse as CSS, creating new CSS functions without waiting for them to be implemented natively in browsers. What do you think?

Also, read this related article: 

What is CSS | CSS INTRODUCTION | Uses of CSS | Types of CSS

Houdini advantages

 

Houdini will allows faster analysis times than those provided by the "traditional" property style of Javascript for styling changes. The browser parses the CSSOM before applying the style updates found in the scripts .

Additionally, the CSSOM model processes - layout, paint, and composition - are repeated for JavaScript style updates. In this context, Houdini is interesting as his code does not wait for the first render cycle to complete. It is included in the first cycle, creating readable  and understandable styles - with CSS values ​​in JavaScript-, thanks to its object-based API.

Among these and other features, Houdini also allows you to expose values ​​as JavaScript objects or create modular CSS. This helps you import configurable components with a single line of JavaScript.

 

Considerations to keep in mind with Houdini

 

However, so much " power requires corresponding responsibility ." With Houdini you can invent whatever you want, for example, your own grids or grid system. But you should think beforehand if it is worth doing, or if it is a good idea.

Remember and consider the fact that many efforts are made to ensure that each feature and function works with good performance, consider all the cases, take into account privacy, security, accessibility, etc, etc ...

 

The Houdini APIs

 

Houdini has different APIs that are worth a look. You can read more on the official CSS Houdini website , but the following are the most important Houdini APIs you should know about.

• CSS parser API. Exposes the CSS parser more directly.
• CSS properties and values ​​API. They allow to register new CSS properties.
• CSS Typed OM. Exposes CSS values ​​astypedJavaScript objects.
• CSS layout API. Allows you to write your own design algorithms, such as masonry or line break.
• CSS paint API. Lets you to write JavaScript functions to draw directly on the content of an element.
• Worklets. Similar to Web Workers, and are called and extended by the rendering engine.

 

Houdini.how

 

Houdini.how is a website from Google and other contributors with demos, based on the Paint API, of what Houdini can do. Visit Houdini. how if you want to quickly get a visual idea of ​​what you can do.

 

Conclusion

 

To conclude, it takes time for a new CSS property to hit the market. The Houdini APIs will allow you to use JavaScript code to manipulate and decorate styles closer to the browser's render line.

This means better performance and more stability. Also, you can develop CSS polyfills that can be shared or even implemented in CSS specifications.

Houdini will make you or your designers feel less restricted by limitations when working on styles, designs and animations, but keep in mind the considerations referred to in this article. Create unique things that you think should be on houdini.how!