大家好,我是前端宝哥。
最近发现 CSS 中居然有 infinity
这个神奇的常量,感觉脑洞大开,各种奇思妙想都涌现出来了! 🤔 来,咱们一起研究一下,看看它除了“无限可能”之外,还能带来哪些实际应用吧。
小贴士:infinity
只能在 calc()
函数里使用哦。
永不败北的 z-index 之战
你有没有遇到过这种情况: 你想要一个元素永远在最上面,结果 z-index 数字越改越大,像是在跟谁比谁更大一样?
现在,这场“军备竞赛”可以结束了!使用 infinity
来设置 z-index,就能获得最高的层级,永远战无不胜!
看这个例子,无论你给蓝色卡片设置什么 z-index
,它都无法盖过紫色卡片,因为紫色卡片使用了 z-index: calc(infinity)
。 试试看!
最大的元素
你试过创建 width
和 height
都为 infinity
像素的 `
.big {
width: calc(infinity * 1px);
height: calc(infinity * 1px);
}
别忘了,我们用 1px 乘以 infinity 来把它变成像素长度。
看看这个演示,你就能看到效果了。 我还在代码里加了一些输出,方便我们更直观地了解浏览器发生了什么:
getComputedStyle()
显示的是 CSS 属性解析后的结果。getBoundingClientRect()
显示的是渲染后元素在视窗中的实际大小。
// getComputedStyle()
const computed = window.getComputedStyle(bigEl);
const computedWidth = computed.getPropertyValue('width');
const computedHeight = computed.getPropertyValue('height');
// getBoundingRect()
const rect = bigEl.getBoundingClientRect();
const rectWidth = rect.width + 'px';
const rectHeight = rect.height + 'px';
其实,CSS 中的 infinity 并不是真正的无限大,它只是个超级大的数字而已。 😂 我的失望程度可比 CSS 中的 infinity 大多了!
在我的电脑(Windows 系统,用 Chrome 浏览器)上,演示中的
不同的无限?
等等,我刚才说的是“我的电脑”, 因为 infinity 在不同的浏览器和操作系统上,解析出来的值可能是不一样的!
看这个例子:
macOS 上的 Chrome 浏览器,width 和 height 都显示为
16,777,214px
, 只有 Windows 上的一半。Firefox 用
getComputedStyle()
显示的 width 是 1.78957e+7px, 用 getBoundingRect() 显示的 width 则是 8,947,849px。更奇葩的是,Firefox 甚至不解析
height: calc(infinity * 1px)
, 直接忽略了! 但是,如果你把 height 设置为 17895697px (Firefox 允许的最大 CSS 长度), 它就能正常显示。 我也不知道为什么 Firefox 处理 height 和 width 的方式不一样。
更让人惊讶的是, infinity
解析出来的值还可能取决于你使用它的 CSS 属性。还记得之前那个 z-index
的例子吗? infinity
的值是 2,147,483,647, 在我的所有测试浏览器中都是一样的,但这跟我们刚刚看到的 width
和 height
的值不一样。
这些奇奇怪怪的 infinity
值并不是随机生成的,而是跟数字的存储方式有关。例如, 2,147,483,647
就是 2^31 - 1
, 是带符号 32
位整数的最大值。
动画到无限
如果让一个元素动画到 infinity
会怎么样? 比如这样:
.interstellar {
animation: go 10s;
}
@keyframes go {
to { translate: calc(infinity * 1px); }
}
结果是,元素会立刻跳到动画的最后,并在接下来的 10 秒内一直保持在这个位置。 也就是说,元素会尽可能地向右移动,然后就停在那里不动了。
这很合理,因为通往无限的路上没有增量值,无限的几分之一还是无限。 所以在动画的每一帧中,动画值都是无限的。
如果设置无限的 animation-delay
呢?
.interstellar {
animation-delay: calc(infinity * 1s);
}
你猜对了! 动画永远不会开始。
实际应用
你会在你的 CSS 中真正使用 infinity
吗? 也许你会! 有时候,你只需要一个非常大的值,infinity
就可以帮到你。
比如,你可以使用 border-radius
创建一个圆角形状, border-radius
的值可以是像素单位,也可以是百分比。如果你的元素大小会发生变化,使用一个比你需要的更大的值,并不会改变形状,反而是一个不错的选择。
div {
border-radius: calc(infinity * 1px);
}
另一个可能的应用是使用 常见的 CSS 代码片段, 通过将内容放置在页面边缘,使其“仅供屏幕阅读器使用”。
.screen-reader-only {
position: absolute;
left: calc(infinity * -1px);
/* 以及其他一些东西 */
}
但是,infinity
真的比像 9999px 这样任意大的值更好吗? 在功能上,它们其实没有区别,结果是一样的。但我认为使用 infinity
可以使代码更具自解释性,因为它明确表达了我们的意图,就是想要一个非常大的值,而不是一个具体的数字。
除以零和负无穷
除以零会得到 infinity, 也就是说,calc(1 / 0)
和 calc(infinity)
的结果是一样的。 这在单位上也适用。 所以你可以写 calc(1px / 0)
, 它和 calc(infinity * 1px)
的值一样。
这个知识点挺有意思,不过我会直接用 infinity
, 这样 CSS 代码更清晰。
还有一个 -infinity
常量,它会给你最小的可能值。 不用多说,它和 infinity
乘以 -1 是一样的。
总结
简单来说,CSS infinity 就是表示一个特定情况下最大可能值的简写。 这个值在不同的浏览器、操作系统和 CSS 属性之间可能会有所不同。
是否使用 infinity
取决于你。 现在主流浏览器对 infinity
的支持都 还不错, 它可以帮助你写出更清晰易懂的 CSS 代码, 但也不是必须的。
最后,如果你觉得宝哥的分享还算实在,就给我点个赞,关注一波。分享出去,也许你的转发能给别人带来一点启发。
关注我,明天见!