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

问题描述

标题说明了一切.

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

I want to know, which is the biggest number I can use in CSS inside a calc() arithmetic.
Is it the same as the biggest number in JavaScript?

当我尝试使用transform时，限制似乎是1e39(在Chrome中，对于 transform:translateX())

When I try this with transform the limit seems to be 1e39 (in Chrome and 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值和单位模块级别3 的规范在 4.1范围限制和范围定义符号

注意:CSS值通常不允许开放范围；因此，仅使用方括号表示法.

Note: CSS values generally do not allow open ranges; thus only square-bracket notation is used.

CSS理论上支持所有值类型的无限精度和无限范围；但是实际上，实现的能力是有限的.UA应该支持合理有用的范围和精度.适当地使用∞或-∞表示理想情况下无限的范围极限.例如，< length [0，∞]>表示非负长度.

CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions. Range extremes that are ideally unlimited are indicated using ∞ or −∞ as appropriate. For example, <length [0,∞]> indicates a non-negative length.

如果未指定范围，则使用括号内的范围表示法或在属性描述中均以[-∞，∞]为准.

If no range is indicated, either by using the bracketed range notation or in the property description, then [−∞,∞] is assumed.

注意:在撰写本文时，括号内的范围表示法是新的；因此，在大多数CSS规范中，任何范围限制仅在散文中有所描述.(例如，不允许负值"或负值无效"表示[0，∞]范围.)这不会使它们的绑定性降低.

Note: At the time of writing, the bracketed range notation is new; thus in most CSS specifications any range limitations are described only in prose. (For example, "Negative values are not allowed" or "Negative values are invalid" indicate a [0,∞] range.) This does not make them any less binding.

因此，似乎属性本身应该定义可能值的范围.因此，这是所有财产中可能出现的最大数目.我可以在其中查找一些属性列表吗?据我了解，这也将取决于浏览器供应商.

So it seems as if the properties themselves should define the range of possible values.In this light, which is the biggest possible number in any property. Is there a list of the properties somewhere that I can look into for this? This will also depend on browser vendors as I understand.

您可能会问为什么我想知道这一点?

You may ask why I want to know this?

我想在CSS中使用一种Heaviside函数，该函数应作为开关使用，根据CSS函数 clamp的不同，输入值大于或小于阈值，结果值为0或1()

I want to have a kind of Heaviside function in CSS which should work as a switch with resulting values 0 or 1 depending on the value of the input being bigger or smaller than a threshold with the help of CSS function clamp()

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

如果 var(-input)小于，这将导致 var(-switch)为 0 如果大于 50 ，则为50 和 1 (如果完全为 50.000001 ，则为一半).

This will result in var(--switch) being 0, if var(--input) is smaller than 50, and 1, if bigger than 50 (and 1 half if exactly 50.000001).

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

Another example:The switch calculation from above could be used for a range calculation like thisWhen I use a value of 1e36 it works in Firefox, but not 1e37

.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;
}

<h1>Range switch (CSS only)</h1>
<div class="container">
  <div class="box" style="--value: 50">50</div>
  <div class="box" style="--value: 60">60</div>
  <div class="box" style="--value: 70">70</div>
  <div class="box" style="--value: 80">80</div>
  <div class="box" style="--value: 90">90</div>
  <div class="box" style="--value: 100">100</div>
</div>

推荐答案

在不需要使用大量数字的情况下，我会考虑一个不同的想法.

I would consider a different idea where you don't need to use huge number.

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

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

if x > MIN the result will be positive (>0) and the max will for sure be bigger than 1 (a * 1/a = 1 so one term is bigger than 1 or both equal to 1) so the result will be clamped to 1

如果 x<MIN 的结果将为负数(< 0 )并限制为0.

if x < MIN the result will be negative (<0) and clamped to 0.

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

The only drawback with this method is that the formula is undefined for x = MIN so consider a non conventional value for MIN (hard to be picked by the user)

.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>

这篇关于CSS的calc()中使用的最大可用数字是多少?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！