CSS 变量意外导致 0

Question

我正在做一个 HTML/CSS-only（即没有 JS）项目，它是 CSS 变量计算的一个例子，但是一旦我引入新的计算，我似乎陷入了僵局对于新的 CSS 变量，该部分的值在计数器中恢复为 0。

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

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

现在我已经完成了下一步的计算，在本例中是将 76 (01001100) 相加，这已在寄存器 --y7 (MSB) 中计算到 --y0 (最低有效位);因此，我希望寄存器 --p6R7 (MSB) 到 --p6R0 在我的调试 window 中以 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 变量无法在调试 window 的计数器显示中正确呈现是有原因的吗？ d) 有办法解决这个问题吗？

提前致谢

Answer 1

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

看起来还不错……很合适运行。使用 getComputedStyle($("#addyear-display")).getPropertyValue('--p6R7') returns 空字符串。并对 --p6R3 - 113kB 的计算、0 和 1 执行相同的操作。

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

可能的解决方案：

使用火狐
优化算法

CSS 变量意外导致 0

CSS Variables unexpectedly resulting in 0

css

binary

cpu-registers

css-variables

css-calc