calc()
算术。
它和JavaScript中最大的数字相同吗?
当我尝试使用transform时,限制似乎是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]在Identification关键字后面的尖括号内进行批注,表示最小值和最大值之间的闭合范围。例如,<integer[0,10]>表示0到10之间的整数(包括0和10)。
CSS理论上支持所有值类型的无限精度和无限范围;但实际上实现的容量是有限的。无人机应该支持合理有效的射程和精度。使用或视情况指示理想无限制的极限范围。例如,<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
50.000001
).
编辑
上面的开关计算可以用于这样的范围计算
当我使用值
1e36
它在Firefox中工作,但不是
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>
