@property是CSS中新增的一个@规则的属性，是CSS Houdini 的 CSS属性和值 API Level 1 （CSS Properties and Values API Level 1）一个属性，可以用来自定义CSS属性，也被称为CSS的变量。为了能很好的区分CSS自定义属性，我更喜欢将其称为CSS Houdini的自定义属性（或变量）。你可能会好奇，它和原生的CSS自定义属性有何不同，又有何独特的特性，可以用来做什么？如果你感兴趣的话，请继续往下阅读。

CSS Houdini是什么？

CSS Houdini是一组底层API，它们公开了CSS引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。CSS Houdini是一组API，它们使用开发人员可以直接访问 CSS对象模型（CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。

从技术上讲，可以通过访问浏览器执行的每个阶段来将文本文件（Text Files）渲染为屏幕上的像素。我们可以把每个阶段都分解成这样：

首先是解析，浏览器读取和解码HTML和CSS文件，然后浏览器会以DOM和CSSOM的形式构建这些文件的对象，由此派生出渲染树（Render Tree）或层树（Layer Tree），这是一种应用于每个元素的样式列表，接着浏览器通过布局（Layout）、绘制（Paint）和合成（Composite）三个步骤绘制每个元素。

现在，如果我们想要构建一个花哨的图形效果，我们必须改变DOM。这是浏览器核心机制的唯一可用阶段。

上图是浏览器的渲染管道，仅DOM可用。

而CSS Houdini启用所有的内部步骤，如下图所示：

为了实现这一点，许多新的API（主要是JavaScript）都在往标准化方面积极推进。

CSS Houdini的优点

当样式改变时，CSS Houdini相比JavaScript的ElementCSSInlineStyle.style的方式能够更快的解析。浏览器在应用脚本中发现的任何样式更新之前，会对CSSOM进行解析，包括上面提到的 布局、 绘制 和 合成 三个过程。此外，对于JavaScript样式更新，布局、绘制和合成过程也会重复进行。CSS Houdini代码不会等待第一个渲染周期完成。相反，它被包含在第一个周期中，即，创建可渲染的，可理解的样式。CSS Houdini为在JavaScript中使用CSS值提供了一个基于对象的API。

CSS Houdini的CSSOM是一个包含类型和方法的CSS对象，并且暴露出了作为JavaScript对象的值。比起先前基于字符串的，对HTMLElement.style进行操作的方案，对JavaScript对象进行操作更符合直觉。每个元素和样式表规则都拥有一个样式对应表，该对应表可以通过StylePropertyMap来获得。

一个CSS Houdini的特性其实就是 Worklet。在它的帮助下，你可以通过引入一行JavaScript代码来引入配置化的组件，从而创建模块式的CSS。不依赖任何前置处理器、后置处理器或者JavaScript框架：

<script> 
    CSS.paintWorklet.addModule('csscomponent.js'); 
</script>

以上添加进的模块包含一个registerPaint()函数，这个模块是完全通过可配置的 worklets 来注册的。

这个 CSS paint() 函数的参数包括 worklet 的名字，以及其他可选的参数。worklet 同时能够访问元素的自定义属性：它们不需要作为函数参数传递。

li {
    background-image: paint(myComponent, stroke, 10px);
    --hilights: blue;
    --lowlights: green;
}

CSS Houdini API

CSS Houdini包括七种类型的API：

• CSS Parser API：这是一个更直接地暴露出 CSS 解析器的 API，能够把任意 CSS 类语言解析成为一种中间类型
• CSS Properties and Values API：定义了一个用来注册新的 CSS 属性的 API。通过该 API 注册的属性必须用一种特定的解析语法书写，以定义其类型、继承行为以及初始值
• CSS Typed OM（CSSOM）：该 API 将 CSSOM 字符串转化为有类型意义的 JavaScript。这将对后续的一个重要的表现打下基础。CSSOM 值以类型化处理的 JavaScript 对象的形式暴露出来，以使其表现可以被控制
• CSS Layout API：作为一个被设计来提升 CSS 扩展性的 API，该 API 能够让开发者去书写他们自己的布局算法，比如 masonry 或者 line snapping
• CSS Painting API：作为一个被设计来提升 CSS 扩展性的 API，该 API 允许开发者通过 paint() 方法书写 JavaScript 函数，以控制绘制元素的背景、边框或者内容区域
• Worklets： 该 API 允许脚本独立于 JavaScript 执行环境，运行在渲染流程的各个阶段。Worklets 在概念上很接近于 Web Workers ，它由渲染引擎调用，并扩展了渲染引擎
• CSS Animation API：该API让我们能够基于用户输入驱动关键动画效果

这些规范目前都还处于W3C的ED阶段：

• CSS Parser API
• CSS Properties and Values API Level 1
• CSS Typed OM Level 1
• CSS Layout API Level 1
• CSS Painting API Level 1
• Font Metrics API Level 1
• CSS Animation Worklet API

有关于CSS Houdini更多的资料还可以阅读：

• CSS Houdini via w3cplus
• Awesome-CSS-Houdini
• CSS Houdini Wiki

CSS Houdini的自定义属性

CSS原生的自定义属性（也常称为变量）受到很多开发者的青眯。在CSS中的使用频率越来越高。它的使用非常简单：

:root {
    --primary-color: green;
}

.element {
    color: var(--primary-color);
}

除了在:root{}中声明CSS自定义属性之外，还可以在其他的选择器中声明CSS自定义属性：

.element {
    --primary-color: green;
    color: var(--primary-color)
}

简单地说，CSS自定义属性可以在任何{}代码块中以--声明，并且通过var()函数来调用。

有关于CSS自定义属性更详细的介绍可以阅读《图解CSS：CSS自定义属性》一文。

虽然CSS自定义属性提供了一种定义用户控制属性的方法，但是除了引用var()进行重用之外，它们的作用有限，不能进行更严格的定义。不过，CSS Houdini中的CSS Properties and Values API Level 1对原生CSS自定义属性进行了扩展，该规范中也提供了自定义属性（我更喜欢称之为 CSS Houdini 自定义属性），允许我们注册属性并定义它们的类型、初始值和确定继承。这提供了很大的功能和灵活性。

CSS Houdini的自定义属性声明方式有两种，一种是在JavaScript中使用CSS.registerProperty()来声明：

CSS.registerProperty({
    name: '--color',        // 一个DOMString，指定被定义的属性的名称
    syntax: '<color>',      // 表示所定义属性的预期语法的DOMString。默认为“*”
    inherits: false,        // 一个布尔值，定义自定义的属性是否应该被继承(真)，或不(假)。默认值为false。
    initialValue: '#c0ffee',// 表示自定义属性的初始值的DOMString。
});

上面的代码表示：

• 在JavaScript脚本中使用CSS.registerProperty()来自