CSS Houdini

翻译不完整。 请帮助我们翻译这篇文章!

Houdini是一组底层API,它们公开了CSS引擎的各个部分,从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。 Houdini是一组API,它们使开发人员可以直接访问CSS 对象模型 (CSSOM),使开发人员可以编写浏览器可以解析为CSS的代码,从而创建新的CSS功能,而无需等待它们在浏览器中本地实现。

Houdini 的优点

当样式改变时Houdini相比JavaScript.style 的方式能够能够更快的解析。  浏览器在应用脚本中发现的任何样式更新之前,会对CSSOM进行解析--包括布局、绘制和合成过程。此外,对于JavaScript样式更新,布局、绘制和复合过程也会重复进行。Houdini代码不会等待第一个渲染周期完成。相反,它被包含在第一个周期中--创建可渲染的、可理解的样式。Houdini为在JavaScript中使用CSS值提供了一个基于对象的API。

Houdini's CSS Typed OM is a CSS Object Model with types and methods, exposing values as JavaScript objects making for more intuitive CSS manipulation than previous string based HTMLElement.style manipulations. Every element and style sheet rule has a style map which is accessible via its StylePropertyMap.

A feature of CSS Houdini is the Worklet. With worklets, you can create modular CSS, requiring a single line of JavaScript to import configureable components: no pre-processors, post-processors or JavaScript frameworks needed.


This added module contains registerPaint() functions, which register completely configurable worklets.

The CSS paint() function parameters include the name of the worklet, along with optional parameters. The worklet also has access to the element's custom properties: they don't need to be passed as function arguments.

li {
	background-image: paint(myComponent, stroke, 10px);
    --hilights: blue;
    --lowlights: green;

Note: With great power comes great responsibility! With Houdini you could invent your own masonry, grid, or regions implementation, but doing so is not necessarily the best idea. The CSS Working group does a lot of work to ensure every feature is performant, handles all edge cases, and considers security, privacy, and accessibility. As you extend CSS with Houdini, make sure to keep these considerations in mind, and start small before moving on to more ambitious projects.

Houdini APIs

Below you can find links to the main reference pages covering the APIs that fall under the Houdini umbrella, along with links to guides to help you if you need guidance in learning how to use them.

CSS Parser API
An API exposing the CSS parser more directly, for parsing arbitrary CSS-like languages into a mildly typed representation.

No guide or reference has currently been written for this API.
CSS Properties and Values API 
Defines an API for registering new CSS properties. Properties registered using this API are provided with a parse syntax that defines a type, inheritance behaviour, and an initial value.

CSS Properties and Values API reference
CSS Properties and Values API guide
CSS Typed OM
Converting CSSOM value strings into meaningfully typed JavaScript representations and back can incur a significant performance overhead. The CSS Typed OM exposes CSS values as typed JavaScript objects to allow their performant manipulation.

CSS Typed OM reference
CSS Typed OM guide
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. It is not yet natively available.

No guide or reference has currently been written for this API.

CSS Painting API

Developed to improve the extensibility of CSS — allows developers to write JavaScript functions that can draw directly into an element's background, border, or content via the paint() CSS function.

CSS Painting API reference
CSS Painting API guide


An API for running scripts in various stages of the rendering pipeline independent of the main JavaScript execution environment. Worklets are conceptually similar to Web Workers, and are called by and extend the rendering engine.

Worklets reference

Other topics

Related topics which may be of interest, since they can be used in tandem with Houdini APIs in interesting ways.

Composite Scrolling and Animation