Houdini APIs

Houdini 是一組低階 API，它公開了 CSS 引擎的各個部分，讓開發者能夠透過掛鉤瀏覽器渲染引擎的樣式和佈局過程來擴充套件 CSS。Houdini 是一組 API，讓開發者能夠直接訪問 CSS 物件模型 (CSSOM)，從而使開發者能夠編寫瀏覽器可以解析為 CSS 的程式碼，由此建立新的 CSS 功能，而無需等待瀏覽器原生實現它們。

Houdini 的優勢

與使用 JavaScript HTMLElement.style 進行樣式更改相比，Houdini 實現了更快的解析速度。瀏覽器會在應用指令碼中找到的任何樣式更新之前解析 CSSOM — 包括佈局、繪製和合成過程。此外，佈局、繪製和合成過程會針對 JavaScript 樣式更新重複執行。Houdini 程式碼不會等待第一個渲染週期完成。相反，它會包含在第一個週期中 — 建立可渲染、可理解的樣式。Houdini 提供了一個基於物件的 API，用於在 JavaScript 中處理 CSS 值。

Houdini 的 CSS 型別物件模型 API 是一個具有型別和方法的 CSS 物件模型，它將值公開為 JavaScript 物件，比以前基於字串的 HTMLElement.style 操作更直觀地操作 CSS。每個元素和樣式表規則都有一個樣式對映，可以透過其 StylePropertyMap 訪問。

CSS Houdini 的一個特性是 Worklet。透過 worklets，您可以建立模組化的 CSS，只需一行 JavaScript 即可匯入可配置的元件：無需預處理器、後處理器或 JavaScript 框架。

CSS.paintWorklet.addModule("css-component.js");

此附加模組包含 PaintWorkletGlobalScope.registerPaint 函式，該函式註冊完全可配置的 worklets。

CSS paint() 函式是 <image> 型別支援的附加函式。它接受的引數包括 worklet 的名稱，以及 worklet 所需的其他引數。Worklet 還可以訪問元素的自定義屬性：無需將它們作為函式引數傳遞。

在下面的示例中，paint() 函式傳遞了一個名為 my-component 的 worklet。

css

li {
  background-image: paint(my-component, stroke, 10px);
  --highlights: blue;
  --theme: green;
}

注意： 強大的力量伴隨著巨大的責任！使用 Houdini，您可以發明自己的 masonry、grid 或 regions 實現，但這不一定是個好主意。CSS 工作組做了大量工作來確保每個功能都具有高效能，能夠處理所有邊緣情況，並考慮安全、隱私和可訪問性。在透過 Houdini 擴充套件 CSS 時，請確保牢記這些考慮因素，並在進行更宏大的專案之前從小處著手。