CSS Houdini 快速入门当我无意中看到一个关于介绍 CSS houdini 的视频，就立马决定暂时停下 typi

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

当我无意中看到一个关于介绍 CSS houdini 的视频，就立马决定暂时停下 typing 要发布的文章，去收集资料 coding 来体验一下 Houdini 给我带来的前所未有的挣脱 CSS 束缚的自由快感。

要想理解什么是 CSS Houdini 还需要介绍一些背景知识，不过今天我们只想尝鲜，就简单说一下什么是 Houdini,CSS Houdini 对外开放了浏览器解析流程的一些系列 API，有了这些 API 开发者就可以来调用 CSS 引擎实现更多，更精彩的样式。

下面就我一起来动手写一个 Hello Houdini 吧。

准备工作

创建一个文件夹作为项目目录
在文件夹下创建一个 index.html、style.css 和 vars.js

CSS 属性和值 API

我们今天要演示的就是一个比较简单方式来开始，定义一个自定义属性，使用 Properties and Values API 开发人员就可以显示地定义的 css 属性，支持属性类型检查、默认值以及继承或不继承其值的属性。

html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Houdini</title>
</head>
<body>
    <div class="container"></div>
    <script src="vars.js"></script>
</body>
</html>

在 html 文件中，定义一个 div 标签便于观察，给定一个样式 container , 然后将 style.css 样式表和 vars.js 用于自定义一些

vars.js

CSS.registerProperty({
    name: '--stop-color',
    syntax: '<color>',
    initialValue: 'orangered',
    inherits: false,
})

传入一个对象作为 CSS.registerProperty 的参数，对象

以--为前缀的属性名，如--example-name，表示自定义属性，使用是通过 var()函数来获取该属性的值。

style.css

.container{
    height: 600px;
    width: 600px;
    background: linear-gradient(yellow, var(--stop-color));
    transition: --stop-color 1s;
}

.container:hover{
    --stop-color:blue
}

效果如下

代码不难，估计大家一看就懂，仅是开了一头，随后我们逐渐深入，希望能够带来更多更精彩关于 Houdini 的分享。