Houdini: The Most Exciting Development in CSS
Home

Houdini: The Most Exciting Development in CSS

Author: Vidhi Malik | Categories: Website Design & User Experience, Websites, Design & Ux

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.

CSS

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.

Consider the case of how things work in JavaScript. A polyfill /transpiller plugin is written that cut shorts the time between having an idea and getting to use it in production in a matter of days rather than years. 

Writing More CSS Polyfills… is it a good idea..??

Initially writing more CSS polyfills seemed like an answer. But then the question arises, whether writing good polyfill can make CSS load as fast as JavaScript or not?

Though, it’s not that simple. Polyfilling CSS is incredibly hard and, in most cases, impossible to do in a way which doesn’t completely destroy performance. On other hand, JavaScript is a dynamic language, which means, the use of JavaScript polyfill is extremely extensible. Polyfilling anything depends on the DOM’s structure or an element’s layout or position.

Below is the outline of the protocol that browser follows from receiving an HTML document to displaying pixels on the screen. The steps colored in blue showcase the results catered by JavaScript:

CSS

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 registerLayout” method, provided by CSS layout API, accepts a layout name (which is later used in CSS) and a JavaScript class that includes all of the layout logic.

CSS Paint API

It provides a methodregisterPaint”, which operates just like the registerLayout” method. Same can be used as the paint()” function in CSS.

Worklets

Worklets are more or less same as web workers, and allow you to import script files and run JavaScript code that:

  • Can be invoked at various points in the rendering pipeline and
  • Is independent of the main thread.

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.