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 24

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.

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 have to be logged in to add a comment

User Comments

Insert Math Markup

ESC
About Inserting Math Content
Display Style:

Embed News Content

ESC
About Embedding News Content

Embed Youtube Video

ESC
Embedding Youtube Videos

Embed TikTok Video

ESC
Embedding TikTok Videos

Embed X Post

ESC
Embedding X Posts

Embed Instagram Post

ESC
Embedding Instagram Posts

Insert Details Element

ESC

Example Output:

Summary Title
You will be able to insert content here after confirming the title of the <details> element.

Insert Table

ESC
Customization
Align:
Preview:

Insert Horizontal Rule

#000000

Preview:


View Content At Different Sizes

ESC

Edit Style of Block Nodes

ESC

Edit the background color, default text color, margin, padding, and border of block nodes. Editable block nodes include paragraphs, headers, and lists.

#ffffff
#000000

Edit Selected Cells

Change the background color, vertical align, and borders of the cells in the current selection.

#ffffff
Vertical Align:
Border
#000000
Border Style:

Edit Table

ESC
Customization:
Align:

Upload Lexical State

ESC

Upload a .lexical file. If the file type matches the type of the current editor, then a preview will be shown below the file input.

Upload 3D Object

ESC

Upload Jupyter Notebook

ESC

Upload a Jupyter notebook and embed the resulting HTML in the text editor.

Insert Custom HTML

ESC

Edit Image Background Color

ESC
#ffffff

Insert Columns Layout

ESC
Column Type:

Select Code Language

ESC
Select Coding Language

Insert Chart

ESC

Use the search box below

Upload Previous Version of Article State

ESC