CSS Houdini !

What Is Houdini?

Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell the browser how to apply CSS during a render process. This will result in significantly better performance and stability than using regular polyfills.

Houdini specification consists of two API groups – high-level APIs and low-level APIs.

High-level APIs are closely related to the browser’s rendering process (style → layout → paint → composite). This includes:

• Paint API
  An extension point for the browser’s paint rendering step where visual properties (color, background, border, etc.) are determined.
• Layout API
  An extension point for the browser’s layout rendering step where element dimensions, position, and alignment are determined.
• Animation API
  An extension point for browser’s composite rendering step where layers are drawn to the screen and animated.

Low-Level APIs form a foundation for high-level APIs. This includes:

• Typed Object Model API
• Custom Properties & Values API
• Font Metrics API
• Worklets

The Future Of CSS !!

Unlike regular CSS feature specifications that have been introduced thus far, Houdini stands out by allowing developers to extend the CSS in a more native way. Does this mean that CSS specifications will stop evolving and no new official implementations of CSS features will be released? Well, that is not the case. Houdini’s goal is to aid the CSS feature development process by allowing developers to create working prototypes that can be easily standardized.

Additionally, developers will be able to share the open-source CSS Worklets more easily and with less need for browser-specific bugfixes.

Custom Properties And Values API

The CSS Properties And Values API allows developers to extend CSS variables by adding a type, initial value and define inheritance. Developers can define CSS custom properties by registering them using the registerProperty method which tells the browsers how to transition it and handle fallback in case of an error.

CSS.registerProperty({
name: “–colorPrimary”,
syntax: “<color>”,
inherits: false,
initialValue: “blue”,
});

This method accepts an input argument that is an object with the following properties:

• name: the name of the custom property
• syntax: tells the browser how to parse a custom property. These are pre-defined values like <color>, <integer>, <number>, <length>, <percentage>, etc.
• inherits: tells the browser whether the custom property inherits its parent’s value.
• initialValue: tells the initial value that is used until it’s overridden and this is used as a fallback in case of an error.

In the following example, the <color> type custom property is being set. This custom property is going to be used in gradient transition. You might be thinking that current CSS doesn’t support transitions for background gradients and you would be correct. Notice how the custom property itself is being used in transition, instead of a background property that would be used for regular background-color transitions.

.gradientBox {
background: linear-gradient(45deg, rgba(255,255,255,1) 0%, var(–colorPrimary) 60%);
transition: –colorPrimary 0.5s ease;
/* … */
}

.gradientBox:hover {
–colorPrimary: red
/* … */
}

Browser doesn’t know how to handle gradient transition, but it knows how to handle color transitions because the custom property is specified as <color> type. On a browser that supports Houdini, a gradient transition will happen when the element is being hovered on. Gradient position percentage can also be replaced with CSS custom property (registered as <percentage> type) and added to a transition in the same way as in the example.

If registerProperty is removed and a regular CSS custom property is registered in a :root selector, the gradient transition won’t work. It’s required that registerProperty is used so the browser knows that it should treat it as color.

In the future implementation of this API, it would be possible to register a custom property directly in CSS.

@property –colorPrimary {
syntax: “<color>”;
inherits: false;
initial-value: blue;
}

Reference

https://ishoudinireadyyet.com/

https://css-houdini.rocks/

https://www.smashingmagazine.com/2020/03/practical-overview-css-houdini/