等等…你是說(shuō)不用寫一行 JS，就能實(shí)現(xiàn)實(shí)時(shí)動(dòng)態(tài)更新的評(píng)分組件？

當(dāng)我第一次看到 CSS 新函數(shù) calc-size() 的時(shí)候，這就是我的真實(shí)反應(yīng)。作為一名常年和動(dòng)態(tài)布局死磕的開(kāi)發(fā)者，這簡(jiǎn)直是純粹的幸福感——因?yàn)槲荫R上意識(shí)到，這次不是又一個(gè)無(wú)聊的 CSS 規(guī)范更新，而是一場(chǎng)布局思維的革命。

接下來(lái)，我?guī)阍敿?xì)了解一下 calc-size() 到底有什么神奇之處，以及為什么它很可能成為你今后的 CSS 新寵。

過(guò)去，我們都遇到過(guò)這樣的痛苦場(chǎng)景

你一定遇到過(guò)這個(gè)看似簡(jiǎn)單卻又讓人抓狂的問(wèn)題：星級(jí)評(píng)分組件。

假設(shè)你想展示一個(gè) 3.5 星的評(píng)分（滿分 5 星），過(guò)去的做法通常是：

• 用 JavaScript 動(dòng)態(tài)計(jì)算寬度
• 添加各種容器和遮罩層
• 甚至再來(lái)點(diǎn)偽元素 (::before) 做美化

但現(xiàn)在，你甚至可以完全不用 JavaScript，也不需要內(nèi)聯(lián)樣式或自定義 CSS 變量。

僅需一個(gè)純凈的 CSS 函數(shù)，就搞定所有問(wèn)題。

這就是我們的主角：

calc-size()

calc-size() 究竟是什么？

簡(jiǎn)單來(lái)說(shuō)，calc-size() 是 CSS 的一個(gè)新函數(shù)，它能動(dòng)態(tài)計(jì)算元素尺寸，使用方式類似于我們熟悉的 calc()，但強(qiáng)大得多：

• 支持內(nèi)在尺寸（intrinsic sizing）比如 min-content、max-content、fit-content 等。
• 支持實(shí)時(shí)計(jì)算布局尺寸。
• 支持動(dòng)態(tài)讀取屬性值（比如 data-rating）實(shí)時(shí)更新。

這意味著你終于能用 CSS 的原生能力實(shí)現(xiàn)動(dòng)態(tài)布局，而不再受限于 JavaScript 或者各種 hack 手段。

直接看案例：用 calc-size() 實(shí)現(xiàn)動(dòng)態(tài)星級(jí)評(píng)分組件

我們直接上例子，讓你親眼看看有多簡(jiǎn)單：

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>

注意，這里沒(méi)有任何 JavaScript，只是 5 個(gè)星星圖標(biāo)，加上一個(gè) 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;
}

就是這么簡(jiǎn)單，來(lái)解釋一下發(fā)生了什么：

• min-content 告訴瀏覽器按內(nèi)容的最小寬度去布局。
• calc(attr(data-rating number) / 5) 根據(jù)評(píng)分動(dòng)態(tài)計(jì)算比例，比如 3.5 分時(shí)比值就是 0.7。
• size * 將該比例應(yīng)用到元素的實(shí)際尺寸上。
• overflow: hidden 負(fù)責(zé)裁剪出漂亮的半顆星星。

結(jié)果是什么？

你得到一個(gè)美觀、響應(yīng)式、完全數(shù)據(jù)驅(qū)動(dòng)的評(píng)分組件，而不需要任何腳本參與。

為什么這件事這么重要？

calc-size() 的出現(xiàn)徹底改變了我們創(chuàng)建響應(yīng)式、內(nèi)容驅(qū)動(dòng)布局的方式：

• 不用 JavaScript 也能實(shí)現(xiàn)基于屬性的交互式 UI
• 再也不用擔(dān)心各種 hack 和 workaround
• 動(dòng)態(tài)尺寸調(diào)整不再困難
• CSS 終于真正回歸了設(shè)計(jì)本位，減少了 JS 和布局邏輯的耦合

作為開(kāi)發(fā)者，這意味著：

• 更少的代碼
• 更好的性能
• 更清晰的關(guān)注點(diǎn)分離（JS專注業(yè)務(wù)邏輯，CSS專注布局）

不過(guò)，它目前仍在試驗(yàn)階段……

的確，截至2025年5月，calc-size() 還處于實(shí)驗(yàn)階段，瀏覽器支持率約70%。

因此，在實(shí)際生產(chǎn)環(huán)境中，你仍然需要提供適當(dāng)?shù)?fallback 方案。

一點(diǎn)點(diǎn)個(gè)人想法

長(zhǎng)期以來(lái)，CSS 都是強(qiáng)大的布局工具，但如今有了 calc-size()，CSS 布局即將進(jìn)入全新紀(jì)元：

• 布局自動(dòng)響應(yīng)內(nèi)容的實(shí)時(shí)狀態(tài)和屬性
• 不再需要 JavaScript 來(lái)實(shí)現(xiàn)基礎(chǔ)布局邏輯
• 動(dòng)態(tài)布局組件終于真正原生化

在我看來(lái)，這將開(kāi)啟無(wú)限的新可能，比如：

• 動(dòng)態(tài)星級(jí)評(píng)分組件
• 自動(dòng)調(diào)整高度的手風(fēng)琴菜單
• 智能進(jìn)度條
• 自適應(yīng)圖片網(wǎng)格
• 基于內(nèi)容長(zhǎng)度自動(dòng)調(diào)整的工具提示（tooltip）

以上這些，以后都可以通過(guò)原生 CSS 輕松實(shí)現(xiàn)。