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:
Before we delve deeper into CSS Houdini APIs, we should understand the basics of how CSS works.
How CSS Works?
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:
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:
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:
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:
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.