等等…你是說不用寫一行 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 輕松實現。