CSS 新函数 calc-size() 实现实时动态更新的评分组件

本文码云笔记将带你详细了解一下 CSS 新函数 calc-size() 的神奇之处，让你不用写一行 JS，就能实现实时动态更新的评分组件。

前端开发中相信你一定遇到过这样的需求：星级评分组件。

比如你想展示一个 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>

从 HTML 代码中我们看到，没有任何 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 负责裁剪出漂亮的半颗星星。

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

calc-size()为什么重要？

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

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

作为前端开发者，这意味着：

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

calc-size()兼容情况

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

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

结语

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

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

未来我们还可以实现更多好玩的东西，比如：

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

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

以上关于CSS 新函数 calc-size() 实现实时动态更新的评分组件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。