此页面由 Cloud Translation API 翻译。

跨浏览器绘制 Worklet 和 Houdini.how

只需点击几下，即可使用 Houdini Paint Worklet 让您的 CSS 更加强大。

Una Kravets

CSS Houdini 是一个涵盖性术语，介绍了一系列低级别的浏览器 API，这些 API 可让开发者更好地控制它们所编写的样式。

Houdini 利用类型化对象模型。开发者可以通过 Properties API 和 Values API。

还引入了绘制、布局和动画功能。 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），使开发者能够定义类似于画布的自定义绘制函数可直接在 CSS 中用作背景、边框、遮罩等。存在着为如何在您自己的界面中使用 CSS 绘制提供各种可能性。

例如，您不必等待浏览器实施倾斜边框功能，只需编写自己的 Paint worklet，或使用现有的已发布的 Worklet。然后，请不要使用 border-radius 将此 Worklet 应用于边框和裁剪。

</ph> 上面的示例使用带有不同参数（参见以下代码）的相同绘制 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 的浏览器中启用，部分浏览器已启用且正在考虑支持 Firefox。

Caniuse 支持 — 目前，基于 Chromium 的浏览器支持 CSS Painting API。

但即使没有全面的浏览器支持，您仍然可以利用 Houdini Paint API 发挥创意，利用“CSS Paint”功能，您的样式适用于所有现代浏览器 Polyfill。为了展示一些以及提供资源和 Worklet 库 houdini.how.

Houdini.how

Houdini.how 是 Houdini Worklet 和资源的库和参考文档。它提供了关于 CSS Houdini 的一切须知信息：浏览器支持、概述其各种 API、用法信息、其他资源和 Live Paint Worklet 示例。Houdini.how 上的每个示例均由 CSS Paint API 提供支持，这意味着它们均适用于所有现代浏览器。来试试吧！

使用 Houdini

Houdini worklet 必须通过本地服务器运行，或者在生产环境中使用 HTTPS 运行。为此，则需在本地安装，或者使用内容传送工具网络 (CDN)（例如 unpkg）传送文件。然后，您需要注册 Worklet。

您可以通过多种方式在自己的网络项目中添加 Houdini.how 展示 Worklet。他们可以可以在原型设计中通过 CDN 使用，也可以使用 npm 模块。无论采用上述哪种方式，您都需要添加 CSS Paint Polyfill，以确保它们可跨浏览器兼容

1. 使用 CDN 进行原型设计

通过 unpkg 注册时，您可以直接链接到 worklet.js 文件，无需在本地安装 Worklet。Unpkg 将解析为作为 main 脚本的 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 与 Paint 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，而是展示社区的工作。如果如果您有要提交的 Worklet 或资源，请查看 GitHub 代码库和贡献准则。我们很期待看到你提交的项目！