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

只要按幾下滑鼠，就能透過 Houdini 繪圖工作區，為 CSS 注入強大動力。

Una Kravets

CSS Houdini 是個總稱，描述一系列低階瀏覽器 API，可讓開發人員更有效率地控管所編寫的樣式。

Houdini 圖層

Houdini 會使用類型物件模型提供更多語意 CSS。開發人員可以透過屬性和值 API，使用語法、預設值和繼承來定義進階 CSS 自訂屬性。

它還會引入繪圖、版面配置和動畫 worklet，讓作者更輕鬆地鉤掛瀏覽器轉譯引擎的樣式和版面配置程序，進而開啟無限可能。

瞭解 Houdini 工作區

Houdini 工作項是瀏覽器指示，可在主執行緒外執行，並可視需要呼叫。您可以使用 Worklet 編寫模組化 CSS 來完成特定工作，只需一行 JavaScript 即可匯入及註冊。與 CSS 樣式的服務工作者非常相似，Houdini 工作項會註冊至應用程式，註冊後即可在 CSS 中以名稱使用。

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

使用 CSS Painting API 實作您自己的功能

CSS Painting API 就是這類工作單元 (Paint 工作單元) 的範例，可讓開發人員定義類似畫布的自訂繪圖函式，直接在 CSS 中用於背景、邊框、遮罩等。在您自己的使用者介面中使用 CSS Paint 的方式，有無窮無盡的可能性。

舉例來說，您可以編寫自己的 Paint 工作區，或使用現有的已發布工作區，而無須等待瀏覽器實作斜邊邊框功能。然後，請將這個 worklet 套用至邊框和裁剪，而非使用 border-radius。

上例使用相同的繪圖工作區，但引數不同 (請參閱下方程式碼)，以便達成這個結果。Glitch 示範。
.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 中啟用。

Caniuse 支援
CSS Painting API 目前支援以 Chromium 為基礎的瀏覽器。

不過，即使沒有完整的瀏覽器支援，您還是可以使用 Houdini Paint API 發揮創意，並透過 CSS Paint polyfill，讓您的樣式在所有新型瀏覽器中運作。為了展示幾種獨特的實作方式，並提供資源和工作區程式庫，我的團隊建構了 houdini.how。

Houdini.how

Worklet 頁面的螢幕截圖。
「Houdini.how」Houdini.how首頁的螢幕截圖。

Houdini.how 是 Houdini 工作區塊和資源的程式庫和參考資料。這份文件提供您需要瞭解的所有 CSS Houdini 相關資訊，包括瀏覽器支援、各種 API 的總覽、用法資訊、其他資源，以及即時繪圖工作區的範例。Houdini.how 上的每個範例都由 CSS Paint API 支援，也就是說，每個範例都適用於所有新式瀏覽器。歡迎試用！

使用 Houdini

Houdini 工作項必須透過本機伺服器執行，或在實際工作環境中透過 HTTPS 執行。如要使用 Houdini 工作區，您必須在本機上安裝該工作區，或是使用 unpkg 等內容傳遞聯播網 (CDN) 來提供檔案。接著，您需要在本機註冊 worklet。

您可以透過幾種方式在自有網站專案中加入 Houdini.how 展示工作區。您可以透過 CDN 使用原型設計功能，也可以使用 npm 模組自行管理 worklet。無論採用哪種方式，您都應一併加入 CSS Paint Polyfill，確保這些內容可跨瀏覽器相容。

1. 使用 CDN 設計原型

從 unpkg 註冊時，您可以直接連結至 worklet.js 檔案，而不需要在本機安裝 worklet。Unpkg 會將 worklet.js 解析為主要指令碼，您也可以自行指定。Unpkg 是透過 HTTPS 提供，因此不會導致 CORS 問題。

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

請注意，這不會註冊語法和備用值的自訂屬性。相反地，每個工作區都會在工作區中嵌入備用值。

如要視需要註冊自訂屬性，請一併加入 properties.js 檔案。

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

如何透過 unpkg 加入 CSS Paint 填充功能：

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

2. 透過 NPM 管理 worklet

從 npm 安裝工作區塊：

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

匯入這個套件不會自動插入繪圖工作區。如要安裝 worklet，您必須產生可解析至套件 worklet.js 的網址，並註冊該網址。您可以透過下列方式進行：

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

每個工作單元資訊卡上都會顯示 npm 套件名稱和連結。

您也必須透過指令碼加入 CSS Paint Polyfill，或直接匯入，就像使用架構或 bundler 一樣。

以下是如何在現代化套裝程式中使用 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 本身不會代管任何工作區塊，而是展示社群的成果。如果您有要提交的工作單元或資源，請查看GitHub 存放區，瞭解貢獻指南。我們很期待看到你提出的想法！