探索前端新领域：CSS Houdini API 的魅力

CSS 一直扮演着构建视觉表现的核心角色。然而，传统的 CSS 有着诸多限制，难以实现一些复杂的动态效果。CSS Houdini，一个革命性的 Web 标准，为开发者打开了一扇新的大门，让我们能够通过 JavaScript 直接与浏览器的 CSS 引擎交互。

CSS Houdini 概述

CSS Houdini 是一系列新兴的 Web API，一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。它允许开发者通过 JavaScript 扩展 CSS 的能力。

Houdini 的名称来源于著名的逃脱艺术家哈里·霍迪尼，象征着开发者能够“逃脱”CSS 的限制，探索更多可能性。

主要特性

CSS Properties and Values API

CSS 属性和值 API，允许开发者显式地定义它们的 CSS 自定义属性，设置属性类型检查、默认值以及是否可继承其值。 有两种使用方式：

• CSS方式：通过@property规则访问
• JavaScript方式：通过CSS.registerProperty接口访问

定义一个@property规则

@property --custom-prop {
    syntax: "<color>";
    inherits: false;
    initial-value: #f83600;
  }

说明：

• 自定义属性名字需带有前缀 --，如 --example--name，表示的是带有值的自定义属性，可以通过 var()函数在全文档范围内复用的。注意，这看起来和CSS变量很像，但是这不是变量，而是CSS属性。

• 字段说明：

  • syntax：语法描述符 必选项 表示你的自定义属性是什么类型，color颜色 angle角度 length长度 ...
  • inherits：属性是否继承 必选项
  • initial-value：初始值

定义一个CSS.registerProperty接口

window.CSS.registerProperty({
    name: "--my-color", //属性名称
    syntax: "<color>",
    inherits: false,
    initialValue: "black",
});

使用自定义属性:

  .box {
    width: 200px;
    height: 300px;
    background: var(--custom-prop);
    color: var(--my-color);
  }

示例：给渐变添加动画

<style>
    .box {
        width: 200px;
        height: 300px;
        background: linear-gradient(0deg, #f9d423, #f83600);
        animation: spin 3s linear infinite;
    }
    @keyframes spin {
        to {
            background: linear-gradient(360deg, #f9d423, #f83600);
        }
    }
</style>

<div class="box"></div>

上面代码本意是想给渐变背景添加动画使其旋转起来，但是这样写无法实现，使用linear-gradient创建的渐变色其实会生成一张背景图片，即background-image属性，浏览器在渲染背景的时候，开发者无法干预，所以无法通过动画控制渐变背景，如果将0deg -> 360deg换成CSS变量，也无法实现。

使用Houdini API，让开发者通过js或者css干预到浏览器的渲染流程中，使渐变应用动画：

@property --card-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
.box {
    width: 200px;
    height: 300px;
    background: linear-gradient(var(--card-angle), #f9d423, #f83600);
    animation: spin 3s linear infinite;
}

@keyframes spin {
    to {
        /* background: linear-gradient(360deg, #f9d423, #f83600); */
        --card-angle: 360deg;
    }
}

其他API

Worklets

允许脚本独立于 JavaScript 执行环境，运行在渲染流程的各个阶段，跟Web Workers的概念很相似。

CSS Paint API

它允许开发人员编写可以直接绘制到元素的背景、边框或内容中的 JavaScript 函数，可以实现复杂的动画效果。

1. 使用 registerPaint函数定义一个Paint 工作器
2. 注册 worklet
3. 使用 paint()CSS 函数调用

path-to-paint-worklet

// 在 Worklet 中定义 Paint 函数
registerPaint(
  "stripePattern",
  class {
    paint(ctx, size) {
      const stripes = 10;
      const stripeWidth = size.width / stripes;
      for (let i = 0; i < stripes; i++) {
        ctx.fillStyle = i % 2 === 0 ? "#ff0000" : "#00ff00";
        ctx.fillRect(i * stripeWidth, 0, stripeWidth, size.height);
      }
    }
  }
);

注册

// 注册 Paint Worklet
if ("paintWorklet" in CSS) {
    CSS.paintWorklet.addModule("./path-to-paint-worklet.js");
} else {
    console.log("浏览器不支持Paint API");
}

使用

 background-image: paint(stripePattern);

写在最后

目前来说，CSS Houdini一些部分已经在 Chrome 和 Firefox 中得到支持，但很多还是实验性的API。随着时间的推移，预计 Houdini API会更加成熟， 将得到更广泛的浏览器支持。到时候前端开发的方式也会发生变化，很多不能搞定的效果都可以应对，提供了前所未有的样式和布局控制能力。

Houdini API 有望成为未来 Web 开发的重要部分。开发者现在就可以开始学习和尝试使用，为即将到来的变革做好准备。

今天的分享就到这里，感谢大家的阅读，欢迎大家来我的公众号：小新学研社。