2026年，你的前端终于不用再“算随机数”和“量高度”了

如果你的项目里还有这样的代码------用 Math.random() 给元素生成随机位置，或者用 scrollHeight 动态设置 height 来实现折叠动画------那么 2026 年 10 月，这两段代码都可以删了。

Chrome 156 正式引入了 CSS random() 函数，Safari Technology Preview 254 同时补上了 calc-size() 和 interpolate-size。一个解决"随机"，一个解决"自动高度"。 它们指向同一个方向：浏览器正在把那些"必须靠 JavaScript 算一下"的事情，收回平台自己手里。

一、`random()`：随机布局，不再需要一行 JavaScript

先看一个你肯定写过的场景。

你想让一组装饰性圆点、粒子或卡片随机散布 在容器里。过去的做法是：用 JavaScript 遍历每个元素，Math.random() 生成 top 和 left，再写入内联样式。元素数量变了，重新算一遍；窗口尺寸变了，可能还要再算一遍。

Chrome 156 带来的 random() 函数，让这件事变成了纯 CSS：

css 复制代码

.particle {
  --x: random(0, 100);
  --y: random(0, 100);
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
}

每个元素都会得到自己在 0 到 100 之间的独立随机值。没有 JS 循环，没有内联样式，没有在数据变化时重新计算坐标。

更重要的是，random() 带有缓存控制机制 。函数可以接受一个 key 作为第一个参数，决定不同 CSS 属性和元素之间是否共享同一个随机值。这意味着你可以让"背景色"和"边框色"基于同一个随机数生成，而不是各自独立随机------这在过去用 Math.random() 是很难精确控制的。

Mozilla 已经对 Firefox 支持 random() 发出了积极信号。Safari 也已经率先落地。这不是一个"Chrome 独占实验"，而是正在成为跨浏览器标准的平台能力。

二、`calc-size()`：`height: auto` 动画，这个坑填了十年

如果说 random() 解决的是一个"方便"问题，那 calc-size() 解决的，是一个困扰了前端十年的硬伤。

你一定遇到过：想做一个手风琴或折叠面板，展开时高度从 0 平滑过渡到 auto。但 CSS 的 transition 不支持 height: auto ------因为 auto 不是一个可以插值的长度。

于是你被迫用 JavaScript 写这样的逻辑：

javascript 复制代码

const content = el.querySelector('.content');
el.style.height = '0px';
requestAnimationFrame(() => {
  el.style.height = content.scrollHeight + 'px';
});
// 过渡结束后还要再设置回 auto，否则窗口缩放又错位

这段代码脆弱、啰嗦，而且几乎每个前端项目里都有一份。

calc-size() 和 interpolate-size 一起，从根上终结了这个问题。

css 复制代码

.accordion-content {
  interpolate-size: allow-keywords;
  height: 0;
  transition: height 0.3s ease;
}
.accordion-content.open {
  height: auto;
}

interpolate-size: allow-keywords 打开了"长度"和 auto、min-content、fit-content 这些固有尺寸关键字 之间的插值通道。calc-size() 则允许你在这些关键字上直接做计算，比如 calc-size(auto, size + 2rem)。

你不再需要测量 scrollHeight，不再需要 requestAnimationFrame，不再需要在过渡结束后手动把高度重置为 auto。 浏览器自己知道"自动高度"是多少，并且能在动画过程中平滑地插值。

三、两件事放在一起看：平台正在拿走"计算层"

random() 和 calc-size() 看起来是两个独立的小功能。但它们背后的逻辑是一致的。

过去，有些事情浏览器"能做但不告诉你" 。它知道一个元素在 auto 下的真实高度，但它不让你在 transition 里用这个值。它能在内部生成随机数，但它没有一个让你在样式表里调用的接口。

2026 年的变化是：浏览器开始把这些"内部知识"开放成标准 API。

这和我们在 2026 年看到的其他趋势完全吻合。sibling-index() 和 sibling-count() 让 CSS 知道了"我是第几个"。Navigation API 让 SPA 路由不再需要手动拼凑 history.pushState 和 popstate。View Transitions 让页面转场从框架能力变成了平台能力。

"计算"这件事，正在从 JavaScript 和框架的中间层，向浏览器的原生层迁移。

四、对前端开发者意味着什么？

第一，你的 package.json 里可能又有东西可以删了。 随机布局的辅助函数、高度动画的封装 Hook、react-collapse 这类专门处理 auto 高度的库------当平台原生支持覆盖了这些场景时，保留它们的理由就只剩下"兼容旧浏览器"了。

第二，代码的"意图"变得更清晰了。 过去 height: auto 的动画逻辑藏在 scrollHeight 的测量和 requestAnimationFrame 的调度里。现在它就是一行 interpolate-size: allow-keywords 加上 transition: height。代码表达的是"我要它平滑展开"，而不是"我通过三步测量和两次赋值让它看起来像平滑展开"。

第三，AI 生成前端代码时，少了一类"必须靠猜"的事情。 当 AI 要生成一个随机散布的效果或一个折叠动画时，它不再需要在"用 JS 算"和"用某个库"之间做不确定的选择。一个标准的 random() 或 interpolate-size 就是正确答案。平台原语越明确，AI 生成的代码越可预测。

写在最后

2026 年 10 月，Chrome 156 带来了 random()，Safari 补上了 calc-size() 和 interpolate-size。

它们不做惊天动地的事。一个让 CSS 能自己生成随机数，一个让 CSS 能对 auto 做动画。但正是这些"小能力"，在一点一点拿走那些原本属于 JavaScript 和第三方库的"计算工作"。

浏览器不再只是一个"渲染你算好的结果"的画布。它开始自己算。

评论区聊聊：你项目里有多少 Math.random() 和 scrollHeight 是可以删掉的？