等等…你是说不用写一行 JS，就能实现实时动态更新的评分组件？

当我第一次看到 CSS 新函数 calc-size() 的时候，这就是我的真实反应。作为一名常年和动态布局死磕的开发者，这简直是纯粹的幸福感——因为我马上意识到，这次不是又一个无聊的 CSS 规范更新，而是一场布局思维的革命。

接下来，我带你详细了解一下 calc-size() 到底有什么神奇之处，以及为什么它很可能成为你今后的 CSS 新宠。

过去，我们都遇到过这样的痛苦场景

你一定遇到过这个看似简单却又让人抓狂的问题：星级评分组件。

假设你想展示一个 3.5 星的评分（满分 5 星），过去的做法通常是：

• 用 JavaScript 动态计算宽度
• 添加各种容器和遮罩层
• 甚至再来点伪元素 (::before) 做美化

但现在，你甚至可以完全不用 JavaScript，也不需要内联样式或自定义 CSS 变量。

仅需一个纯净的 CSS 函数，就搞定所有问题。

这就是我们的主角：

calc-size()

calc-size() 究竟是什么？

简单来说，calc-size() 是 CSS 的一个新函数，它能动态计算元素尺寸，使用方式类似于我们熟悉的 calc()，但强大得多：

• 支持内在尺寸（intrinsic sizing）比如 min-content、max-content、fit-content 等。
• 支持实时计算布局尺寸。
• 支持动态读取属性值（比如 data-rating）实时更新。

这意味着你终于能用 CSS 的原生能力实现动态布局，而不再受限于 JavaScript 或者各种 hack 手段。

直接看案例：用 calc-size() 实现动态星级评分组件

我们直接上例子，让你亲眼看看有多简单：

HTML：

<div data-rating="3.5">
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
</div>

注意，这里没有任何 JavaScript，只是 5 个星星图标，加上一个 data-rating 属性。

CSS：

div {
  display: flex;
  width: calc-size(
    min-content,
    size * calc(attr(data-rating number) / 5)
  );
  overflow: hidden;
  font-size: 2em;
  border: 2px solid #000;
  padding: 0.1em 0;
  background: #fff;
  color: #367d59;
}

就是这么简单，来解释一下发生了什么：

• min-content 告诉浏览器按内容的最小宽度去布局。
• calc(attr(data-rating number) / 5) 根据评分动态计算比例，比如 3.5 分时比值就是 0.7。
• size * 将该比例应用到元素的实际尺寸上。
• overflow: hidden 负责裁剪出漂亮的半颗星星。

结果是什么？

你得到一个美观、响应式、完全数据驱动的评分组件，而不需要任何脚本参与。

为什么这件事这么重要？

calc-size() 的出现彻底改变了我们创建响应式、内容驱动布局的方式：

• 不用 JavaScript 也能实现基于属性的交互式 UI
• 再也不用担心各种 hack 和 workaround
• 动态尺寸调整不再困难
• CSS 终于真正回归了设计本位，减少了 JS 和布局逻辑的耦合

作为开发者，这意味着：

• 更少的代码
• 更好的性能
• 更清晰的关注点分离（JS专注业务逻辑，CSS专注布局）

不过，它目前仍在试验阶段……

的确，截至2025年5月，calc-size() 还处于实验阶段，浏览器支持率约70%。

因此，在实际生产环境中，你仍然需要提供适当的 fallback 方案。

一点点个人想法

长期以来，CSS 都是强大的布局工具，但如今有了 calc-size()，CSS 布局即将进入全新纪元：

• 布局自动响应内容的实时状态和属性
• 不再需要 JavaScript 来实现基础布局逻辑
• 动态布局组件终于真正原生化

在我看来，这将开启无限的新可能，比如：

• 动态星级评分组件
• 自动调整高度的手风琴菜单
• 智能进度条
• 自适应图片网格
• 基于内容长度自动调整的工具提示（tooltip）

以上这些，以后都可以通过原生 CSS 轻松实现。