跨瀏覽器繪畫工作台和 Houdini.how

只要按幾下滑鼠，即可利用 Houdini 油漆作品為你的 CSS 注入源源不絕的活力。

Una Kravets

CSS Houdini 是一個統稱詞彙，用於描述一系列低階瀏覽器 API，可讓開發人員進一步控管並控制他們編寫的樣式。

Houdini 透過型別物件模型啟用更語意的 CSS。開發人員可以透過 Properties and Values API 定義進階 CSS 自訂屬性，包括語法、預設值和沿用機制。

此外，其中也推出了繪製、版面配置和動畫小工具，讓作者能輕鬆融入瀏覽器算繪引擎的樣式和版面配置程序，開啟無限可能。

瞭解 Houdini 工作程式

Houdini 工作小程式是在主執行緒中執行的瀏覽器指令，可視需要呼叫。小程式可讓您編寫模組化 CSS 來完成特定工作，而且只需要使用一行 JavaScript 即可匯入及註冊。與 CSS 樣式的服務工作站非常類似，Houdini Worklets 已在您的應用程式註冊，註冊後即可依名稱在 CSS 中使用。

編寫 Worklet 檔案註冊 Worklet 模組 (CSS.paintWorklet.addModule(workletURL)) 使用 Worklet (background: paint(confetti))

使用 CSS Painting API 導入自己的功能

CSS Painting API 就是這類工作流程 (Paint) 的例子，可讓開發人員定義類似畫布的自訂繪圖函式，直接於 CSS 中使用，做為背景、邊框、遮罩等。您可以透過各式各樣的方式，在自己的使用者介面中使用 CSS Paint。

舉例來說，與其等待瀏覽器實作角度邊框功能，您也可以自行編寫「 Paint」 Worklet 或使用現有已發布的 Worklet。然後不要使用邊框半徑 將這個小工具套用至邊框和裁剪

.angled {
  --corner-radius: 15 0 0 0;
  --paint-color: #6200ee;
  --stroke-weight: 0;

  /* Mask every angled button with fill mode */
  -webkit-mask: paint(angled-corners, filled);
}

.outline {
  --stroke-weight: 1;

  /* Paint outline */
  border-image: paint(angled-corners, outlined) 0 fill !important;
}

CSS Painting API 是目前最受支援的 Houdini API 之一，其規格為 W3C 候選建議。目前在所有以 Chromium 為基礎的瀏覽器中啟用，且在 Safari 中只有部分支援，而在 Firefox 中則考慮啟用。

不過，即使不支援完整的瀏覽器，你還是可以使用 Houdini Paint API 發揮創意，使用 CSS Paint Polyfill 並在所有新版瀏覽器中呈現你的樣式。我的團隊建構了 houdini.how，以便展示幾種獨特的實作方式，以及提供資源和工作小庫。

Houdini.how

Houdini.how 是 Houdini 工作小程式與資源的程式庫和參考資料。這份指南提供 CSS Houdini 的所有必學知識：瀏覽器支援、各種 API 的總覽、用量資訊、其他資源，以及即時繪製工作流程範例。Houdini.how 上的每個範例都是由 CSS Paint API 提供支援，因此兩者可在所有新版瀏覽器上運作。大膽踏出第一步吧！

使用 Houdini

Houdini Worklet 必須透過本機伺服器執行，或透過 HTTPS 執行正式環境。如要使用 Houdini Worklet，必須在本機安裝，或使用內容傳遞網路 (CDN) (例如 unpkg) 來提供檔案。然後您需要在本機註冊 Worklet。

有多種方法能將 Houdini.how 示範小工具加入網路專案。在原型設計容量中，您可以透過 CDN 使用這些資源，也可以使用 npm 模組自行管理工作流程。無論採用哪種做法，都建議您一併加入 CSS Paint Polyfill，確保兩者可以跨瀏覽器相容。

1. 使用 CDN 進行原型設計

從 Unpkg 註冊時，您可以直接連結至 Worklet.js 檔案，無需在本機安裝 Worklet。Unpkg 會解析為 worklet.js 做為主要指令碼，您也可以自行指定。Unpkg 不會因為透過 HTTPS 提供，所以不會造成 CORS 問題。

CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");

請注意，這不會註冊語法和備用值的自訂屬性。而是將備用值嵌入 Worklet 中。

(選擇性) 如要登錄自訂屬性，請一併加入 properties.js 檔案。

<script src="https://unpkg.com/<package-name>/properties.js"></script>

加入含有 Unpkg 的 CSS Paint Polyfill：

<script src="https://unpkg.com/css-paint-polyfill"></script>

2. 透過 NPM 管理工作小程式

從 npm 安裝 Worklet：

npm install <package-name>
npm install css-paint-polyfill

匯入這個套件並不會自動插入繪製小程式。如要安裝工作小程式，您必須產生可解析為套件的 worklet.js 的網址，並予以註冊。您可以：

CSS.paintWorklet.addModule(..file-path/worklet.js)

每個 Worklet 資訊卡上可以找到 npm 套件名稱和連結。

此外，您還必須透過指令碼加入 CSS Paint Polyfill，或直接匯入，就像使用架構或組合器一樣。

以下範例說明如何在現代軟體包中將 Houdini 和繪製 polyfill 搭配使用：

import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';

CSS.paintWorklet.addModule(workletURL);

提供圖像

現在您已遊玩過一些 Houdini 範例，現在就來提供自己的範例吧！ Houdini.how 並未代管任何工作小程式，而是展示社群的作品。如要提交 Worklet 或資源，請前往 GitHub 存放區 (內含貢獻指南)。我們非常期待看到你的成果！