CSS的calc()中使用的最大可用数字是多少? [英] What is the biggest usable number for use in calc() in CSS?

问题描述

标题说明了一切.

我想知道，这是我可以在 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类型的范围标记中使用CSS括号内的范围标记[[min，max]]进行标注，该范围标记在Identifier关键字之后的尖括号中，指示介于(包括)min和max之间的封闭范围.例如，< integer [0,10]>表示介于0和10之间(包括0和10)的整数.

Properties can restrict numeric values to some range. If the value is outside the allowed range, then unless otherwise specified, the declaration is invalid and must be ignored. Range restrictions can be annotated in the numeric type notation using CSS bracketed range notation—[min,max]—within the angle brackets, after the identifying keyword, indicating a closed range between (and including) min and max. For example, <integer [0,10]> indicates an integer between 0 and 10, inclusive.

注意: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 this When 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()中使用的最大可用数字是多少?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！