Sometimes we wish to implement a particular CSS feature, but we can’t because it isn’t fully supportive in all browsers! And, even if it fits to all browsers then incompatibility and buggy inconsistency remains a concern.
So, If this has happened to you —and for sure it might have — then I’d recommend Houdini to you.
Now here comes the question:
WHAT IS HOUDINI?
Houdini is a new W3C task force. A set of APIs that will, for the first time, give developers the power to extend CSS itself. This set of APIs is bag packed with tools to hook into the styling and layout process of a browser’s rendering engine.
Is it a good idea of having Houdini?
And, how will it help developers build websites in the present state and the days to come?
The article will further answer each and every query of yours. But, first let’s focus on "What are the problematic areas and why there is a need to change?>"
Problems Houdini Solves
Anytime a new CSS feature is introduced, the only way it gets added to CSS is through standardized processes that in turn take years for featured proposals to gain widespread adoption and remain as a pain point.
In 2009, Flexbox was first proposed, however, lack of browser support remains the constraint for developers till date. Interestingly, with modernization of browsers (automatic updates), the problem got resolved to some extent with the lag between the proposed and general availability of features.
Writing More CSS Polyfills… is it a good idea..??
Since the rendering pipeline in other steps is inaccessible to the end users, the only way a browser can do things differently is by updating/modifying the DOM manually.
Some Key Features of Houdini
Now as we know that developers have a few access points to the browser’s rendering pipeline, the places that are accessible are DOM or, to some extent, the CSSOM.
But with several new specifications, complete rendering pipeline couldn’t be accessed by the developers for the first time.
New specifications and their capabilities.
CSS Parser API
It enables a developer to extend the CSS parser and guides them on new constructs. For example, new media rules, new pseudo-classes, and nesting, @extends, @apply, etc.
CSS Properties and Values API
CSS already has custom properties, but CSS Properties and Values API take custom properties a step ahead and make them even more useful by adding types that allow developers to transition and animate custom features.
CSS Typed OM
It can be stated as version 2 of the current CSSOM. Its purpose is to solve critical problems with the current model and also include features added by the new CSS Parsing API, CSS Properties and Values API.
CSS Layout API
It enables developers to write their own layout modules, which means anything can be passed to the CSS “
display property”. The “
CSS Paint API
It provides a method “
registerPaint”, which operates just like the “
registerLayout” method. Same can be used as the “
paint()” function in CSS.
Worklet scripts will actively restrict the types of operations one can perform thereby improving performance.
So, should you use Houdini, or not?
Browser vendors, similar to software developers, have to prioritize new features and that priority is often a function of how eagerly users have been wanted to use those features. Hence, someone who builds websites should definitely use Houdini as its going to ease their designing efforts for future endeavors.