此页面由 Cloud Translation API 翻译。

跨浏览器绘制 Worklet 和 Houdini.how

只需点击几下，即可使用 Houdini 绘制 Worklet 为 CSS 注入强大动力。

Una Kravets

CSS Houdini 是一个统称，用于描述一系列低级浏览器 API，可让开发者对自己编写的样式拥有更大的控制力和更强大的功能。

Houdini 通过类型化对象模型实现了更具语义的 CSS。开发者可以通过 Properties and Values API 定义具有语法、默认值和继承方式的高级 CSS 自定义属性。

它还介绍了绘制、布局和动画 worklet，这些 worklet 让作者更轻松地钩入浏览器渲染引擎的样式和布局流程，从而开启了无限可能。

了解 Houdini 工作流

Houdini Worklet 是从主线程运行的浏览器指令，可在需要时调用。借助 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 或使用现有的已发布 worklet，而不必等待浏览器实现角度边框功能。然后，将此 worklet 应用于边框和剪裁，而不是使用 border-radius。

上面的示例使用了相同的绘制 Worklet 和不同的参数（请参阅以下代码）来实现此结果。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 支持 — 基于 Chromium 的浏览器目前支持 CSS Painting API。

不过，即使没有浏览器的全面支持，您仍然可以使用 Houdini Paint API 发挥创意，并通过 CSS Paint Polyfill 让您的样式在所有现代浏览器中正常运行。为了展示一些独特的实现，以及提供资源和 Worklet 库，我的团队构建了 houdini.how。

Houdini.how

Houdini.how 是 Houdini 工作流和资源的库和参考文档。其中包含您需要了解的有关 CSS Houdini 的所有信息：浏览器支持、各种 API 的概览、使用信息、其他资源以及实时绘制 Worklet 示例。Houdini.how 上的每个示例都由 CSS Paint API 提供支持，这意味着它们可以在所有现代浏览器上运行。快来试试吧！

使用 Houdini

Houdini 工作流必须在本地通过服务器运行，或者在生产环境中通过 HTTPS 运行。如需使用 Houdini 工作流程，您需要在本地安装它，或者使用 unpkg 等内容分发网络 (CDN) 来传送文件。然后，您需要在本地注册该 workerlet。

您可以通过多种方式在自己的 Web 项目中添加 Houdini.how 展示工作区。您可以通过 CDN 以原型设计的形式使用它们，也可以使用 npm 模块自行管理 worklet。无论是哪种方式，您都需要添加 CSS Paint Polyfill，以确保它们能够跨浏览器兼容。

1. 使用 CDN 进行原型设计

从 unpkg 注册时，您可以直接链接到 worklet.js 文件，而无需在本地安装 worklet。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。如需安装该 worklet，您需要生成一个解析为该软件包的 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 代码库。我们非常期待看到您的成果！