Houdini APIs

I want to learn more about the Houdini APIs, which give you low-level access to parts of the CSS engine. I am going to read the MDN web docs on them.

Date Created:
0 545

References


Related

  • Worklets
  • CSS Layout API
    • Designed to improve the extensibility of CSS, this API enables developers to write their own layout algorithms, like masonry or line snapping.


Notes

Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser's rendering engine. Houdini is a group of APIs that give developers direct access to the CSS object model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.
  • Houdini enables faster parse times than using JavaScript HTMLElement.style for style changes
  • Houdini code doesn't wait for that first rendering cycle to be complete; it is included in that first cycle
  • Houdini's CSS Typed Object Model API is a CSS Object Model with types and methods, exposing values as JavaScript objects making for more intuitive CSS manipulation
  • A feature of CSS Houdini is the Worklet. With worklets, you can create modular CSS, requiring a single line of JavaScript to import configurable components: no pre-processors, post processors, or JavaScript frameworks needed.
CSS.paintWorklet.addModule("css-component.js");
  • The CSS paint() function is an additional function supported by the <image> type. It takes parameters that include the name of the worklet, but additional parameters needed by the worklet.
    • In the following example, the paint() function is passed a worklet called myComponent
li {
background-image: paint(myComponent, stroke, 10px);
--highlights: blue;
--theme: green;
}

Using the CSS properties and values API

The CSS Properties and Values API - part of the CSS Houdini umbrella of APIs - allows the registration of CSS custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.

Registering a custom property allows you to tell the browser how the custom property should behave, what types are allowed, whether the custom property inherits its value, and what the default value of the custom property is.

Registering Custom Properties

The following registers a custom property named --my-prop using CSS.regsiterProperty

window.CSS.registerProperty({
name: "--my-prop",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});

The same registration can happen in CSS.

@property --my-prop {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}

One of the advantages of registering a property is that the browser now knows how to handle the custom property through things like transitions.

Using the CSS Typed Object Model

The CSS Typed Object Model API exposes CSS values as typed JavaScript objects to allow their performant manipulation. The CSS Typed OM makes CSS manipulation more logical and performant by providing object features (rather than CSSOM string manipulation), providing access to types, methods, and an object model for CSS values.

With the CSS Typed OM API, we can access all the CSS properties and values - including custom properties - that are impacting an element.

The power of the CSS Typed OM is that values are separate from units; parsing and concatenating values may become a thing of the past. Every CSS property in a style map has a value.

Using the CSS Painting API

The CSS Paint API is designed to enable developers to programmatically define images which an then be used anywhere a CSS image can be invoked.

Comments

You can read more about how comments are sorted in this blog post.

User Comments