Building powerful custom properties with CSS Houdini

Introduction

In these series of blogs, we will talk about Houdini - the new era of CSS. Before jumping right into CSS Houdini, let’s first understand what the word Houdini means.

Houdini means, an expert in the art of escaping. So what are we trying to escape here? We are trying to escape the chained process of CSS properties. Being a Frontend developer, we think how nice it would be if we had the power to create our CSS properties.

Frontend Ninjas, your wait is over!  

What is CSS Houdini? 

Houdini is a collection of low-level APIs for CSS. Using these, the browser APIs user can access the browsers’ CSS Engine. All these APIs can be accessed through JavaScript which made it developer-friendly. 

The 7 APIs we can access are:

1. Typed OM API
2. Properties & Values API
3. Paint API
4. Layout API
5. Animation worklet
6. Parser API
7. Font Metrics API

Before we delve deeper into CSS Houdini APIs, we should understand the basics of how CSS works.

How CSS Works?

1. Browsers load the HTML received from the network
2. Browsers convert HTML into the DOM and stored in Computer’s memory
3. Browser fetch assets like CSS which are connected via HTML document 
4. The browser parses the fetched CSS. Based on the selector it finds, it applies the rules to the relative node in the DOM and applies a style to them.
5. Then a render tree is laid out and a DOM tree is created (This is going to be explained next)
6. The display is then presented on the screen

Let’s first understand how the rendering pipeline works and how the DOM will be created.

Rendering Pipeline:

Rendering pipeline is a process which carries the basic structure of a website. Which includes:

• Parsing of the HTML to DOM
• Render tree construction
• Display (laying out) of the render tree
• Painting the render tree

The question persists, how to apply a hook into the existing rendering pipeline process for modifying the regular flow? Nowadays, the answer to every problem in the web world is Javascript, just as the answer to everything in the universe is 42. :)

As promised at the beginning of my blog, let’s look at how CSS Houdini works: 

• Hook into the chained process
• Javascript plays a key role in this Hook process
• Using JavaScript Typed OM, Custom Properties, Paint, Layout and Animation APIs can be hooked.
• There are 2 other APIs: Parser API and Font Metrics API. These can be used to register new things related to CSS.

User-Agent Challenges: 

Challenges while theming the select box are very common. Despite the numerous advances in technology, we cannot directly theme the default select box. To theme it, we require the basic CSS code and a lengthy JS polyfill code. 

If overriding is possible with JS polyfill then what is the difference between JSPolyfill and Houdini? 

JS Polyfill V/S Houdini:

For styling an element using CSS property we have to write JSPolyfill code. This is how it will work:

• The browser goes through this parser
• set and reads DOM and CSS Object Model cascade, layout, paint & composite process
• The browser then repaints it all over again with JS polyfill since we are re-applying style to the element which has already been applied.

This is not the case with Houdini. With CSS Houdini we can hook the CSS parsing process and apply the styling with our defined properties. 

 Conclusion

CSS Houdini is a blessing for frontend developers, especially from a CSS code management perspective. Here’s why:  

• Browser APIs are now open for developers
• JavaScript can be used to hook into the chained process of CSS properties
• Frontend developers can register their properties
• Using Parser, Font, Paint, Layout, TypedOM, and Custom Properties APIs eliminates the need for JSPolyfill, making the code more performant! 

Now that you are well versed with what CSS Houdini is and its applications. My next blog in this series will talk more about the APIs, challenges faced with CSS, how to overcome those challenges, and the current state of CSS Houdini.