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

只要按幾下滑鼠，就能使用 Houdini 油彩繪畫工具提升 CSS 效能。

Una Kravets

CSS Houdini 是一個總稱 說明瞭一系列低階瀏覽器 API，可讓開發人員進一步掌控 呈現的樣式

Houdini 利用 Typed Object，啟用更多語意 CSS 模型開發人員可以 使用語法、預設值和繼承來定義進階 CSS 自訂屬性 Properties and Value API：

也會導入繪製、版面配置和動畫 worklet，這會開啟 創造無限可能的世界，讓作者更容易掌握樣式和版面配置流程 瀏覽器轉譯引擎的核心部分

瞭解 Houdini 工作程式

Houdini 小程式是會在主執行緒上執行的瀏覽器指示，而且可以呼叫 。Worklet 可讓您編寫模組 CSS 以完成特定工作， 匯入及註冊的 JavaScript 行。與 CSS 樣式的服務工作人員類似，Houdini 工作程式 註冊使用，註冊完成後，就能在 CSS 中以名稱使用。

寫入活體程式檔案 註冊 DOlet 模組 (CSS.paintWorklet.addModule(workletURL)) 使用 worklet (background: paint(confetti))

使用 CSS Painting API 導入自家功能

CSS Painting API 就是這樣的示例 工作程式 (Paint 工作程式)，可讓開發人員定義類似畫布的自訂繪製函式 並可直接在 CSS 中使用，做為背景、邊框、遮罩等等。全世界都在 如何在自己的使用者介面中使用 CSS 繪圖。

舉例來說，您不用等待瀏覽器實作角度框線功能， 您自己的小程式，或使用現有已發布的 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 為基礎的瀏覽器皆已啟用此功能，但只有部分瀏覽器採用。 同時也建議在 Firefox 中使用

即使沒有完整瀏覽器支援，您仍然可以運用 Houdini Paint API 發揮創意， 透過 CSS 繪圖工具在新版瀏覽器中運作的樣式 Polyfill。並展示一些獨特的 以及提供資源和活頁簿資料庫 houdini.how.

Houdini.how

Houdini.how 是一個程式庫，適用於 Houdini 工作程式和資源。這項服務 提供了 CSS Houdini 的所有必學知識：瀏覽器支援 各種 API 總覽、使用方式 資訊、額外資源和現場油漆工人 samples。Houdini.how 上的每個範例都是由 CSS Paint API 提供支援 相輔相成，可在所有新式瀏覽器上運作快試試看吧！

使用 Houdini

Houdini 工作程式必須透過本機伺服器執行，或在正式環境中透過 HTTPS 執行。為了 搭配 Houdini 工作程式，你需要在本機安裝或使用內容上傳 例如 unpkg 等網路 (CDN)。接著，您需要 建立機器學習模型

你可以透過下列幾種方式，在網路專案中納入 Houdini.how 展示工作程式。他們可以 以便用於原型設計能力，或者您也可以自行使用 npm 模組取得訓練資源。無論是哪一種方式，建議您也加入 CSS Paint Polyfill 來確保 具備跨瀏覽器相容性

1. 透過 CDN 進行原型設計

從 unpkg 註冊時，可以直接連結至 worklet.js 檔案，無需在本機儲存 安裝小程式Unpkg 將解析為 worklet.js 做為主要指令碼；你也可以自行指定 你自己。Unpkg 不會造成 CORS 問題，因為這是透過 HTTPS 提供。

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 管理 Worklet

從 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 並未代管工作程式，而是展示社區的成果。如果 如果有想提交的活頁簿或資源，請前往 GitHub 存放區和捐款指南 我們很期待看到你的精彩作品！