CSS 变量意外导致 0

Question

我正在开发一个纯 HTML/CSS（即没有 JS）项目，这是 CSS 变量计算的一个示例，但我似乎陷入了僵局，因为一旦我为新的 CSS 变量引入了新的计算，该部分的值在计数器中恢复为 0。

让我用我的 CodePen 解释一下：https://codepen.io/eliseodannunzio/pen/ZEyGvOy

我有 4 个下拉列表当前设置为特定值，在本例中为 1976 年 6 月。使用 8 位寄存器进行一系列计算，从而为下一组寄存器产生流动效应，依此类推。标记为--p5R0 到--p5R5 的寄存器用于我添加0 值的步骤（基于Century 下拉列表（在本例中为1900's = 0））。六个寄存器 --p5R0 (LSB) 到 --p5R5 (MSB) 的值导致 11001 (25) 的值，这是本例中的预期值...

现在我已经完成了下一步的计算，在本例中是添加 76 (01001100)，这已在寄存器 --y7 (MSB) 到 --y0 (LSB) 中计算出来；因此，我希望寄存器 --p6R7 (MSB) 到 --p6R0 在我的调试窗口中以 01100101 的形式显示 101 (25 + 76)。

由于某种原因，似乎只有前 3 位是可计算的（位 0、1 和 2），当前显示 88888101（8 显示为 --p6R3 到 --p6R7 被注释掉，计数器为接受这一点，这表明这是有效的）。一旦遇到--p6R3（第 3 位）的值，所有计数器似乎由于某种原因恢复为 0。如果它们各自的 CSS 变量不可用，我已将计数器设置为默认值为 8，或多或少有助于调试。

有问题的代码接近尾声，搜索/** ISSUE **/ 找到它，但我在下面复制了它...

--p6R0: calc((1 - 2 * var(--y0, 0)) * var(--p5R0, 0) + var(--y0, 0));
--p6K1: calc(var(--p5R0, 0) * var(--y0, 0));
--p6R1: calc((1 - 2 * var(--y1, 0)) * (var(--p6K1, 0) * (1 - 2 * var(--p5R1, 0)) + var(--p5R1, 0)) + var(--y1, 0));
--p6K2: calc(var(--p6K1, 0) * (var(--p5R1, 0) * (1 - 2 * var(--y1, 0)) + var(--y1, 0)) + var(--p5R1, 0) * var(--y1, 0));
--p6R2: calc((1 - 2 * var(--y2, 0)) * (var(--p6K2, 0) * (1 - 2 * var(--p5R2, 0)) + var(--p5R2, 0)) + var(--y2, 0));
--p6K3: calc(var(--p6K2, 0) * (var(--p5R2, 0) * (1 - 2 * var(--y2, 0)) + var(--y2, 0)) + var(--p5R2, 0) * var(--y2, 0));
/* These values below seem to fail and revert the p6Rx series to zero... why???? */
/* --p6R3: calc((1 - 2 * var(--y3, 0)) * (var(--p6K3, 0) * (1 - 2 * var(--p5R3, 0)) + var(--p5R3, 0)) + var(--y3, 0)); */
/* --p6K4: calc(var(--p6K3, 0) * (var(--p5R3, 0) * (1 - 2 * var(--y3, 0)) + var(--y3, 0)) + var(--p5R3, 0) * var(--y3, 0)); */
/* --p6R4: calc((1 - 2 * var(--y4, 0)) * (var(--p6K4, 0) * (1 - 2 * var(--p5R4, 0)) + var(--p5R4, 0)) + var(--y4, 0)); */
/* --p6K5: calc(var(--p6K4, 0) * (var(--p5R4, 0) * (1 - 2 * var(--y4, 0)) + var(--y4, 0)) + var(--p5R4, 0) * var(--y4, 0)); */
/* --p6R5: calc((1 - 2 * var(--y5, 0)) * (var(--p6K5, 0) * (1 - 2 * var(--p5R5, 0)) + var(--p5R5, 0)) + var(--y5, 0)); */
/* --p6K6: calc(var(--p6K5, 0) * (var(--p5R5, 0) * (1 - 2 * var(--y5, 0)) + var(--y5, 0)) + var(--p5R5, 0) * var(--y5, 0)); */
/* --p6R6: calc((1 - 2 * var(--y6, 0)) * var(--p6K6, 0) + var(--y6, 0)); */
/* --p6R7: calc(var(--p6K6, 0) * var(--y6, 0)); */

这些值的显示在下面的代码中进一步完成：

#addyear-display:after {
  counter-reset: R60 var(--p6R0, 8) R61 var(--p6R1, 8) R62 var(--p6R2, 8) R63 var(--p6R3, 8) R64 var(--p6R4, 8) R65 var(--p6R5, 8) R66 var(--p6R6, 8) R67 var(--p6R7, 8);
  content: "p6R7:" counter(R67) " p6R6:" counter(R66) " p6R5:" counter(R65) " p6R4:" counter(R64) " p6R3:" counter(R63) " p6R2:" counter(R62) " p6R1:" counter(R61) " p6R0:" counter(R60);
  position: absolute;
  top: 4rem;
  left: 0;
}

--p6R3 到 --p6R7 的代码块未注释的那一刻，那些 8 应该消失并显示代表 101 的 1 和 0，但这没有发生，它出现全为零，我知道这是错误的。 . 我一直在寻找解释为什么这些 CSS 变量会失败，但结果却是空的。

我的问题是：

a) 我的 CSS 计算是否无效？ b) 给定样式表上的 CSS var() 调用或 calc() 调用数量是否有限制？ c) 一旦注释代码块被取消注释，是否有原因导致我的 CSS 变量无法在调试窗口的计数器显示中正确呈现？ d) 有没有办法解决这个问题？

提前致谢

Answer 1

您的计算是有效的。您可能没有意识到变量不会自行评估 calc(*)。所有嵌套计算在实际属性中使用时都会进行评估。因此，您的大多数变量存储的公式应该只在它们所使用的 DOM 节点的上下文中才有意义（请记住，calc 也与% 和em 一起使用）。而且它们会逐渐变大。这是 chrome 检查器为 --p6R7 显示的内容：

看起来还不错……它被截断了。使用 getComputedStyle($("#addyear-display")).getPropertyValue('--p6R7') 返回一个空字符串。对 --p6R3 执行相同操作 - 113kB 的计算、0 和 1。

据我所知，CSS 中属性值的长度没有实际限制。我已经进行了一些测试，似乎在 chrome 中的单个公式中嵌套计算有限制（100 计算）。 counter-reset 在您取消注释 --p6R3 的那一刻解析为 none。变量不重置为0，计数器是。另一方面，Firefox 看似随机地使页面崩溃，但大多数时候它会忍受取消对整个块的注释。

可能的解决方案：

1. 使用火狐
2. 优化算法