此页面由 Cloud Translation API 翻译。

跨浏览器绘制 Worklet 和 Houdini.how

只需点击几下，即可通过 Houdini Paint worklet 显著提升 CSS 广告系列的效果。

Una Kravets

CSS Houdini 是一个总称，描述了一系列低层级浏览器 API，可让开发者更好地控制和控制他们编写的样式。

Houdini 通过类型化对象模型实现了更多语义 CSS。开发者可以通过 Properties API 和 Values API 使用语法、默认值和继承功能定义高级 CSS 自定义属性。

此外，它还引入了绘制、布局和动画 worklet，可让作者更轻松地融入浏览器渲染引擎的样式设置和布局流程，从而开创了无限可能。

了解 Houdini Worklet

Houdini worklet 是在主线程外运行的浏览器指令，可在需要时调用。借助 Worklet，您可以编写模块化 CSS 来完成特定任务，并且需要一行 JavaScript 来导入和注册。与用于 CSS 样式的 Service Worker 非常相似，Houdini worklet 会注册到您的应用中，注册后，就可以按名称在 CSS 中使用。

写入 Worklet 文件注册 Worklet 模块 (CSS.paintWorklet.addModule(workletURL)) 使用 Worklet (background: paint(confetti))

使用 CSS Painting API 实现您自己的功能

CSS Painting API 就是此类 Worklet（绘制 Worklet）的示例。它允许开发者定义类似于画布的自定义绘图函数，可直接在 CSS 中用作背景、边框、蒙版等。在您自己的界面中使用 CSS Paint 的方式有很多种。

例如，您可以编写自己的绘制 Worklet，或使用现有的已发布 Worklet，而不是等待浏览器实现角度边框功能。然后，将此 Worklet 应用于边框并进行裁剪，而不是使用边框半径。

上面的示例使用具有不同参数的同一个绘制 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 worklet 和资源的库和参考文档。它提供了有关 CSS Houdini 所需的所有信息：浏览器支持、各种 API 概览、用法信息、其他资源以及实时绘制 Worklet 示例。Houdini.how 上的每个示例均由 CSS Paint API 提供支持，这意味着这些示例适用于所有现代浏览器。快来试试吧！

使用 Houdini

Houdini worklet 必须通过本地服务器运行，或者在生产环境中通过 HTTPS 运行。为了使用 Houdini Worklet，您需要将其安装在本地，或使用 unpkg 等内容分发网络 (CDN) 传送文件。然后，您需要在本地注册该 Worklet。

您可以通过多种方式在自己的网络项目中加入 Houdini.how 展示 Worklet。它们可以通过 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 代码库。我们很想看看你的想法！