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.
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 calledmyComponent
- In the following example, the
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
There are currently no comments for this article.