CSS 中的转换和数据保护
CSS 自定义属性，也称为 CSS 变量， 可让您在 CSS 中定义自己的属性，并在整个 CSS。虽然如今它们非常有用，但也存在一些缺点 难以使用：它们可以取任意值， 被意外覆盖，它们始终会继承 且您无法自行转换。借助 Houdini 的 CSS 属性和 Values API 级别 1， Chrome 78 现已提供这些功能，但这些缺点已被超越， 自定义属性，功能超乎想象！
什么是 Houdini？
在介绍这个新 API 之前，我们先快速介绍一下 Houdini。CSS 代码 Houdini 特遣队（也就是人们常说的 CSS Houdini，简称 Houdini） “开发一些功能来解释样式和布局。” Houdini 规范的集合包括 以便激发浏览器的呈现引擎的功能， 更深入地了解我们的样式以及扩展渲染引擎的能力。 然后，在 JavaScript 中键入 CSS 值，并填充或创建新的 CSS 最终还是有可能实现不影响性能Houdini 有可能 网络上具有超能力的创造力。
CSS Properties 和 Values API 级别 1
CSS Properties 和 Values API 级别 1（Houdini Props 和 Vals）使我们能够为自定义属性指定结构。这是当前的 自定义属性时的情况：
.thing {
--my-color: green;
}
由于自定义属性没有类型，因此在意想不到的类型时可能会被覆盖
方法。例如，思考一下，如果使用网址定义 --my-color 会发生什么。
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
在此示例中，由于未输入 --my-color，因此它不知道网址是否有效
颜色值！使用时，它会回退到默认值（color 为黑色，
对于 background 是透明的）。借助 Houdini Props 和 Vals，自定义属性可以
注册后，浏览器就知道该注册了！
现在，自定义属性 --my-color 已注册为颜色！这会告诉
浏览器允许使用哪些类型的值，以及如何输入和处理这些值
属性！
对已注册的属性详解
按如下所示注册属性：
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
它支持下列选项：
name: string
自定义属性的名称。
syntax: string
如何解析自定义属性。您可以在 CSS 值和单位规范中找到完整的可能值列表。默认设置为 *。
inherits: boolean
是否继承父元素的值。默认为 true。
initialValue: string
自定义属性的初始值。
深入了解syntax。有一些有效的
选项
从数字、颜色到
<custom-ident>
。您也可以使用以下值修改这些语法
- 附加
+表示它接受以空格分隔的 该语法。例如，<length>+是以空格分隔的 长度 - 附加
#表示接受以逗号分隔的 该语法。例如，<color>#应为以英文逗号分隔的 颜色 - 在语法或标识符之间添加
|表示所提供的任何 选项都有效。例如，<color># | <url> | magic将允许 以逗号分隔的颜色列表、网址或字词magic。
Gotchas
Houdini Props 和 Vals 存在两个问题。第一个是 已定义，因此无法更新现有的已注册属性，并且尝试 系统会抛出一个错误，指明该属性已被 。
其次，与标准媒体资源不同， 会进行解析而是在计算时对其进行验证。也就是说 检查该元素的 属性，并且在有效属性之后再添加无效属性不会回退 有效网址；无效的属性将回退到注册的 属性的默认值。
为自定义属性添加动画效果
除了类型检查之外，注册的自定义属性还提供了一个有趣的奖励： 为其添加动画效果！基本动画示例如下所示：
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
当您将鼠标悬停在按钮上时，它会以动画形式从红色变为绿色！不包含 就会从一种颜色跳到另一种颜色，因为 如果没有注册，浏览器就不知道 值，因此无法保证能够转换这些转换。 不过，此示例可以更进一步，为 CSS 渐变添加动画效果！通过 可以使用相同的注册属性编写以下 CSS：
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
这将为属于 linear-gradient 一部分的自定义属性添加动画效果，
为线性渐变添加动画效果。查看下方的 Glitch 以查看完整代码
自己动手尝试一下
总结
Houdini 即将在浏览器推出 使用和扩展 CSS 的全新方式。涂料 API 已提供 现在是“Custom Props”和“Vals”，我们的创意工具箱不断扩充，让我们能够 定义类型化 CSS 属性，并使用它们创建激动人心的新颖有趣的内容，并为其添加动画效果 设计。Houdini 的 队列中 反馈并了解 Houdini 的下一步举措。Houdini 的存在是为了开发功能 解释了“魔力”样式和布局工具，赶快行动起来， 充分利用这些神奇的功能