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 年代 = 0))。六个寄存器 --p5R0 (LSB) 到 --p5R5 (MSB) 的值产生 11001 (25) 的值，这是本例中所期望的...

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

由于某种原因，似乎只有前 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解析为 none当你取消注释的那一刻--p6R3 。变量没有重置为 0，计数器重置为 0。另一方面，Firefox 看似随机地使页面崩溃，但大多数时候它都会取消整个 block 的注释。

可能的解决方案:

1. 使用火狐浏览器
2. 优化算法