CSS 中 calc() 的最大可用数字是多少？

Question

标题说明了一切。

我想知道，这是我在calc()算术中可以在 CSS 中使用的最大数字。
它与 JavaScript 中的最大数字相同吗？

当我尝试使用转换时，限制似乎是 1e39（在 Chrome 和 for 中transform: translateX()）

div span {
  display: block;
  width: 100px;
  height: 100px;
  background-color: gold;
}
div:nth-child(1) span {
  -webkit-transform: translatex(calc(1e38px * 1e-37));
          transform: translatex(calc(1e38px * 1e-37));
}
div:nth-child(2) span {
  -webkit-transform: translatex(calc(1e39px * 1e-37));
          transform: translatex(calc(1e39px * 1e-37));
}
div:nth-child(3) span {
  -webkit-transform: translatex(calc(1e40px * 1e-37));
          transform: translatex(calc(1e40px * 1e-37));
}

<div>
   <code>transform: translatex(calc(1e38px * 1e-37));</code>
  <span></span>
</div>

<div>
   <code>transform: translatex(calc(1e39px * 1e-37));</code>
  <span></span>
</div>

<div>
   <code>transform: translatex(calc(1e40px * 1e-37));</code>
  <span></span>
</div>

CSS Values and Units Module Level 3的规范在段落4.1 Range Restrictions and Range Definition Notation 中说明了这一点

属性可以将数值限制在某个范围内。如果值超出允许范围，则除非另有说明，否则声明无效，必须忽略。范围限制可以在数字类型符号中使用 CSS 括号范围符号 - [min,max] - 在尖括号内，在标识关键字之后进行注释，指示（并包括）min 和 max 之间的封闭范围。例如，<integer [0,10]> 表示 0 到 10（含）之间的整数。

注意：CSS 值通常不允许开放范围；因此只使用方括号表示法。

CSS 理论上支持所有值类型的无限精度和无限范围；然而在现实中，实现的容量是有限的。UA 应该支持合理有用的范围和精度。理想情况下不受限制的范围极值用 ? 或者 ？？作为适当的。例如，<length [0,?]> 表示非负长度。

如果没有指定范围，无论是使用括号中的范围表示法还是在属性描述中，则假定为 [??,?]。

注意：在撰写本文时，括号中的范围表示法是新的；因此在大多数 CSS 规范中，任何范围限制都只在散文中描述。（例如，“不允许负值”或“负值无效”表示 [0,?] 范围。）这并不会降低它们的约束力。

所以似乎属性本身应该定义可能值的范围。从这个角度来看，这是任何财产中可能的最大数字。是否有我可以查看的属性列表？据我了解，这也取决于浏览器供应商。

你可能会问我为什么想知道这个？

我想在 CSS 中有一种 Heaviside 函数，它应该作为一个开关工作，结果值为 0 或 1，这取决于在 CSS 函数的帮助下输入的值大于或小于阈值 clamp()

--switch: clamp(0, (50.000001 - var(--input)) * 1e10, 1);

这将导致var(--switch)是0，如果var(--input)小于50，并且1，如果大于50（1半，如果恰好50.000001）。

编辑

另一个例子：上面的开关计算可以用于这样的范围计算当我使用1e36它的值时，它在 Firefox 中工作，但不是1e37

--switch: clamp(0, (50.000001 - var(--input)) * 1e10, 1);

.container {
  display: -webkit-box;
  display: flex;
}

.box {
  --switch1: clamp(0, (var(--value) - 59.0000001) * 1e36, 1);
  --switch2: clamp(0, (91.0000001 - var(--value)) * 1e36, 1);
  --range-switch: clamp(0, var(--switch1) * var(--switch2), 1);
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  background-color: gold;
  border: 1px solid;
  -webkit-transform: translateY(calc(15px - var(--range-switch) * 15px));
          transform: translateY(calc(15px - var(--range-switch) * 15px));
  background-color: hsl(calc(100 * var(--range-switch)), 100%, 50%);
  display: -webkit-box;
  display: flex;
  text-align: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}

Answer 1

我会考虑一个不同的想法，你不需要使用大量的数字。

我将使用公式max(x - MIN , 1/(x - MIN))

如果x > MIN结果为正 ( >0) 并且最大值肯定大于1（a * 1/a = 1因此一项大于 1 或两项都等于 1），则结果将被限制为1

如果x < MIN结果为负 ( <0) 并钳制为 0。

此方法的唯一缺点是公式未定义，因此x = MIN请考虑 MIN 的非常规值（用户很难选择）

.container {
  display: -webkit-box;
  display: flex;
}

.box {
  --switch1: clamp(0, max(var(--value) - 59.9987 , 1/(var(--value) - 59.9987)), 1);
  --switch2: clamp(0, max(90.0011 - var(--value),  1/(90.0011 - var(--value))), 1);
  --range-switch: clamp(0, var(--switch1) * var(--switch2), 1);
  height: 50px;
  padding:0 8px;
  box-sizing: border-box;
  border: 1px solid;
  transform: translateY(calc(15px - var(--range-switch) * 15px));
  background-color: hsl(calc(100 * var(--range-switch)), 100%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.box::before {
  content:attr(style);
  font-family:monospace;
  text-indent:-9ch;
  overflow:hidden;
  font-size:18px
}

<h1>Range switch (CSS only)</h1>
<div class="container">
  <div class="box" style="--value: 50"></div>
  <div class="box" style="--value: 59"></div>
  <div class="box" style="--value: 59.5"></div>
  <div class="box" style="--value: 59.98"></div>
  <div class="box" style="--value: 60"></div>
  <div class="box" style="--value: 61"></div>
  <div class="box" style="--value: 70"></div>
  <div class="box" style="--value: 80"></div>
  <div class="box" style="--value: 89.8"></div>
  <div class="box" style="--value: 90"></div>
  <div class="box" style="--value: 90.99"></div>
  <div class="box" style="--value: 91"></div>
  <div class="box" style="--value: 100"></div>
</div>