CSS 循环依赖：利用 CSS 变量实现简单的状态机循环

大家好，今天我们来聊一个略微有些“黑科技”性质的话题：利用 CSS 循环依赖和 CSS 变量来实现简单的状态机循环。这听起来可能有些反直觉，因为循环依赖在大多数编程语言中通常被认为是应该避免的。但在 CSS 的特定场景下，巧妙地利用它，我们可以创造出一些有趣的效果。

什么是循环依赖？

循环依赖指的是两个或多个变量相互依赖，形成一个闭环。例如，变量 A 依赖于变量 B，而变量 B 又依赖于变量 A。这会导致计算时出现无限循环，理论上永远无法确定最终值。

在传统的编程语言中，这种循环依赖通常会导致程序崩溃或者陷入死循环。但 CSS 的处理方式有所不同。

CSS 如何处理循环依赖？

CSS 规范并没有明确禁止循环依赖。当 CSS 引擎遇到循环依赖时，它通常会进行有限次数的迭代计算，并在达到迭代次数上限后停止计算，并采用最后一次计算的结果。不同的浏览器实现可能对迭代次数的上限有所不同，但通常都在一个相对较小的范围内（比如 10-20 次）。

重要的是，CSS 引擎不会无限循环。它会尝试解决依赖关系，如果无法在一定次数的迭代后解决，则停止并使用当前值。这为我们利用循环依赖创造了机会。

CSS 变量（自定义属性）

在深入探讨状态机之前，我们需要先回顾一下 CSS 变量（也称为自定义属性）。 CSS 变量允许我们在 CSS 中定义可重复使用的值，并在整个样式表中引用它们。

定义 CSS 变量的语法如下：

:root {
  --primary-color: #007bff;
}

使用 CSS 变量的语法如下：

.button {
  background-color: var(--primary-color);
}

CSS 变量可以包含任何有效的 CSS 值，包括颜色、长度、数字、字符串等。它们还支持级联和继承，这使得它们非常灵活和强大。

状态机简介

状态机是一个抽象模型，用于描述对象在不同状态之间的转换。一个状态机包含以下要素：

状态 (State): 对象可能存在的不同情况。
事件 (Event): 触发状态转换的事件。
转换 (Transition): 当事件发生时，对象从一个状态转换到另一个状态的规则。

一个简单的例子是一个灯泡：

状态: 亮 (On), 灭 (Off)
事件: 开关按下 (Switch)
转换:
- 如果状态是灭 (Off) 且事件是开关按下 (Switch)，则转换为亮 (On)
- 如果状态是亮 (On) 且事件是开关按下 (Switch)，则转换为灭 (Off)

使用 CSS 变量实现简单的状态机

现在，让我们尝试使用 CSS 变量和循环依赖来实现一个简单的状态机。假设我们想要创建一个简单的计数器，它可以在点击按钮时递增。

首先，我们需要定义一个 CSS 变量来存储计数器的当前值：

:root {
  --counter: 0; /* 初始值 */
}

接下来，我们需要一个按钮来触发计数器的递增。我们可以使用 :active 伪类来检测按钮是否被点击。

<button class="counter-button">Increment</button>

.counter-button {
  /* 样式省略 */
}

现在，关键的部分来了。我们需要使用循环依赖来递增计数器。我们可以创建一个新的 CSS 变量，它依赖于 --counter，并且在按钮被点击时增加 1：

.counter-button:active {
  --counter: calc(var(--counter) + 1);
}

这里就出现了循环依赖。 --counter 的新值依赖于它自身的前一个值。当按钮被点击时，浏览器会尝试计算 --counter 的新值。由于存在循环依赖，浏览器会进行有限次数的迭代，并在每次迭代中递增 --counter 的值。

最后，我们需要显示计数器的值。我们可以使用 content 属性和 attr() 函数来显示 --counter 的值：

.counter-button::after {
  content: var(--counter);
  display: block;
  margin-top: 10px;
}

完整的代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --counter: 0;
}

.counter-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

.counter-button:active {
  --counter: calc(var(--counter) + 1);
}

.counter-button::after {
  content: "Count: " var(--counter);
  display: block;
  margin-top: 10px;
}
</style>
</head>
<body>
<button class="counter-button">Increment</button>
</body>
</html>

这个例子存在一个问题：每一次点击都会导致计数器增加多次，而不是一次。 这是因为浏览器在 :active 状态持续期间会多次重新计算 --counter 的值。要解决这个问题，我们需要更精细的控制状态转换。

优化状态机：添加状态变量

为了更精确地控制状态转换，我们可以引入一个额外的 CSS 变量来表示按钮的状态。我们可以使用 --button-state 变量来表示按钮是否被点击。

:root {
  --counter: 0;
  --button-state: 0; /* 0: 未点击, 1: 已点击 */
}

当按钮被点击时，我们将 --button-state 设置为 1。当按钮释放时，我们将 --button-state 设置为 0。

.counter-button:active {
  --button-state: 1;
}

.counter-button:focus { /* 使用 focus 解决鼠标释放后 :active 状态消失的问题 */
   outline: none; /*  Remove outline */
}

/* Trick to reset on mouse up, using focus event */
.counter-button:not(:active):focus {
  --button-state: 0;
}

现在，我们可以使用 --button-state 来控制计数器的递增。我们只有在 --button-state 从 0 变为 1 时才递增计数器。这可以使用 if() 函数（CSS Houdini 的一部分，但目前兼容性有限，这里只做演示，实际项目中需要寻找替代方案）来实现。

.counter-button {
  --previous-state: var(--button-state); /* 保存上一个状态 */
}

.counter-button:active {
  --button-state: 1;
  --counter: calc(var(--counter) + if(var(--button-state) != var(--previous-state), 1, 0)); /* 只有状态改变时才递增 */
}

.counter-button:focus { /* 使用 focus 解决鼠标释放后 :active 状态消失的问题 */
   outline: none; /*  Remove outline */
}

/* Trick to reset on mouse up, using focus event */
.counter-button:not(:active):focus {
  --button-state: 0;
  --previous-state: 1; /* 确保下次点击时状态会改变 */
}

注意：if() 函数是 CSS Houdini 的一部分，目前兼容性有限。在实际项目中，你需要寻找替代方案来实现条件判断。 一种常见的替代方案是使用 clamp() 函数，结合一些数学计算来实现类似的效果。

使用 `clamp()` 函数模拟条件判断

由于 if() 函数的兼容性问题，我们需要寻找一种替代方案来实现条件判断。 clamp() 函数可以帮助我们实现类似的效果。

clamp(min, val, max) 函数返回一个介于 min 和 max 之间的值。如果 val 小于 min，则返回 min。如果 val 大于 max，则返回 max。否则，返回 val。

我们可以利用 clamp() 函数的这个特性来模拟条件判断。例如，我们可以使用以下表达式来判断 --button-state 是否从 0 变为 1：

clamp(0, var(--button-state) - var(--previous-state), 1)

如果 --button-state 从 0 变为 1，则表达式的值为 1。否则，表达式的值为 0。

现在，我们可以使用这个表达式来控制计数器的递增：

.counter-button {
  --previous-state: var(--button-state); /* 保存上一个状态 */
}

.counter-button:active {
  --button-state: 1;
  --counter: calc(var(--counter) + clamp(0, var(--button-state) - var(--previous-state), 1)); /* 只有状态改变时才递增 */
}

.counter-button:focus { /* 使用 focus 解决鼠标释放后 :active 状态消失的问题 */
   outline: none; /*  Remove outline */
}

/* Trick to reset on mouse up, using focus event */
.counter-button:not(:active):focus {
  --button-state: 0;
  --previous-state: 1; /* 确保下次点击时状态会改变 */
}

这个代码与之前使用 if() 函数的版本功能相同，但它使用了更兼容的 clamp() 函数来实现条件判断。

完整的代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --counter: 0;
  --button-state: 0; /* 0: 未点击, 1: 已点击 */
}

.counter-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  --previous-state: var(--button-state); /* 保存上一个状态 */
}

.counter-button:active {
  --button-state: 1;
  --counter: calc(var(--counter) + clamp(0, var(--button-state) - var(--previous-state), 1)); /* 只有状态改变时才递增 */
}

.counter-button:focus { /* 使用 focus 解决鼠标释放后 :active 状态消失的问题 */
   outline: none; /*  Remove outline */
}

/* Trick to reset on mouse up, using focus event */
.counter-button:not(:active):focus {
  --button-state: 0;
  --previous-state: 1; /* 确保下次点击时状态会改变 */
}

.counter-button::after {
  content: "Count: " var(--counter);
  display: block;
  margin-top: 10px;
}
</style>
</head>
<body>
<button class="counter-button">Increment</button>
</body>
</html>

状态转换表

为了更清晰地描述状态机的行为，我们可以使用状态转换表。状态转换表描述了在不同状态下，当发生特定事件时，状态机会如何转换。

对于我们的计数器示例，状态转换表如下：

当前状态 (`--button-state`)	事件	下一个状态 (`--button-state`)	计数器递增
0	按钮按下 (active)	1	是
1	按钮释放 (focus)	0	否

更复杂的状态机

虽然我们只演示了一个简单的计数器示例，但使用 CSS 变量和循环依赖可以实现更复杂的状态机。例如，我们可以创建一个状态机来控制动画的播放和暂停，或者创建一个状态机来管理表单的验证流程。

关键在于合理地定义状态变量和状态转换规则，并使用 CSS 变量和循环依赖来实现这些规则。

注意事项

浏览器兼容性： 虽然 CSS 变量的兼容性已经很好，但在一些旧版本的浏览器中可能存在问题。在使用 CSS 变量之前，请务必检查目标浏览器的兼容性。
性能： 循环依赖可能会影响页面的性能，特别是当状态转换非常频繁时。在使用循环依赖时，请务必进行性能测试，并确保它不会对用户体验产生负面影响。
可维护性： 使用 CSS 变量和循环依赖实现的状态机可能会比较难以理解和维护。在编写代码时，请务必添加清晰的注释，并使用有意义的变量名。
if() 函数的兼容性： if() 函数是 CSS Houdini 的一部分，目前兼容性有限。在实际项目中，你需要寻找替代方案来实现条件判断。
依赖于浏览器的实现细节： 循环依赖的迭代次数上限可能因浏览器而异，因此不应过度依赖具体的迭代次数。

示例：简单的开关切换

我们可以使用类似的技巧来实现一个简单的开关切换效果。

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --switch-state: 0; /* 0: Off, 1: On */
}

.switch {
  width: 50px;
  height: 25px;
  background-color: #ccc;
  border-radius: 12.5px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.switch::before {
  content: "";
  position: absolute;
  width: 21px;
  height: 21px;
  background-color: white;
  border-radius: 50%;
  top: 2px;
  left: calc(2px + var(--switch-state) * 25px);
  transition: left 0.2s ease-in-out;
}

.switch:active {
  --switch-state: calc(1 - var(--switch-state));
}

/* Correct focus issues */
.switch:focus {
    outline: none;
}

.switch:not(:active):focus {
    --switch-state: var(--switch-state);
}

/* Optional: Use a checkbox for accessibility */
.switch input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Style based on the checkbox state */
.switch input[type="checkbox"]:checked + .switch {
    background-color: #4CAF50;
}

.switch input[type="checkbox"]:checked + .switch::before {
    left: calc(2px + 25px);
}

</style>
</head>
<body>
<label>
  <input type="checkbox">
  <span class="switch"></span>
</label>
</body>
</html>

在这个例子中，我们使用 --switch-state 变量来表示开关的状态。当开关被点击时，我们将 --switch-state 的值从 0 切换到 1，或者从 1 切换到 0。这会导致开关的背景颜色和滑块的位置发生变化，从而实现切换效果。

请注意，这里我们使用了一个隐藏的复选框来提高可访问性。复选框的状态与 --switch-state 变量同步，这使得屏幕阅读器可以正确地识别开关的状态。

总结：另辟蹊径的 CSS 应用

总而言之，利用 CSS 循环依赖和 CSS 变量来实现简单的状态机循环是一种非常规的技巧。虽然它可能不适用于所有场景，但在某些情况下，它可以帮助我们创建出一些有趣和创新的效果。记住要谨慎使用，并充分考虑浏览器兼容性和性能问题。这种方式给我们提供了一种新的思考方式，在 CSS 的世界里，有些看似错误的东西，如果能巧妙地利用，也能产生意想不到的效果。

更多IT精英技术系列讲座，到智猿学院