這個新出的 CSS 函數(shù)，一下子干掉了我一半的 JavaScript 代碼！
等等…你是說不用寫一行 JS，就能實現(xiàn)實時動態(tài)更新的評分組件？
當我第一次看到 CSS 新函數(shù) calc-size() 的時候，這就是我的真實反應(yīng)。作為一名常年和動態(tài)布局死磕的開發(fā)者，這簡直是純粹的幸福感——因為我馬上意識到，這次不是又一個無聊的 CSS 規(guī)范更新，而是一場布局思維的革命。
接下來，我?guī)阍敿毩私庖幌?nbsp;calc-size() 到底有什么神奇之處，以及為什么它很可能成為你今后的 CSS 新寵。
過去，我們都遇到過這樣的痛苦場景
你一定遇到過這個看似簡單卻又讓人抓狂的問題：星級評分組件。
假設(shè)你想展示一個 3.5 星的評分（滿分 5 星），過去的做法通常是：
- 用 JavaScript 動態(tài)計算寬度
- 添加各種容器和遮罩層
- 甚至再來點偽元素 (
::before) 做美化
但現(xiàn)在，你甚至可以完全不用 JavaScript，也不需要內(nèi)聯(lián)樣式或自定義 CSS 變量。
僅需一個純凈的 CSS 函數(shù)，就搞定所有問題。
這就是我們的主角：
calc-size()
calc-size() 究竟是什么？
簡單來說，calc-size() 是 CSS 的一個新函數(shù)，它能動態(tài)計算元素尺寸，使用方式類似于我們熟悉的 calc()，但強大得多：
- 支持內(nèi)在尺寸（intrinsic sizing）比如
min-content、max-content、fit-content等。 - 支持實時計算布局尺寸。
- 支持動態(tài)讀取屬性值（比如
data-rating）實時更新。
這意味著你終于能用 CSS 的原生能力實現(xiàn)動態(tài)布局，而不再受限于 JavaScript 或者各種 hack 手段。
直接看案例：用 calc-size() 實現(xiàn)動態(tài)星級評分組件
我們直接上例子，讓你親眼看看有多簡單：
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;
}
就是這么簡單，來解釋一下發(fā)生了什么：
min-content告訴瀏覽器按內(nèi)容的最小寬度去布局。calc(attr(data-rating number) / 5)根據(jù)評分動態(tài)計算比例，比如 3.5 分時比值就是 0.7。size *將該比例應(yīng)用到元素的實際尺寸上。overflow: hidden負責(zé)裁剪出漂亮的半顆星星。
結(jié)果是什么？
你得到一個美觀、響應(yīng)式、完全數(shù)據(jù)驅(qū)動的評分組件，而不需要任何腳本參與。
為什么這件事這么重要？
calc-size() 的出現(xiàn)徹底改變了我們創(chuàng)建響應(yīng)式、內(nèi)容驅(qū)動布局的方式：
- 不用 JavaScript 也能實現(xiàn)基于屬性的交互式 UI
- 再也不用擔(dān)心各種 hack 和 workaround
- 動態(tài)尺寸調(diào)整不再困難
- CSS 終于真正回歸了設(shè)計本位，減少了 JS 和布局邏輯的耦合
作為開發(fā)者，這意味著：
- 更少的代碼
- 更好的性能
- 更清晰的關(guān)注點分離（JS專注業(yè)務(wù)邏輯，CSS專注布局）
不過，它目前仍在試驗階段……
的確，截至2025年5月，calc-size() 還處于實驗階段，瀏覽器支持率約70%。
因此，在實際生產(chǎn)環(huán)境中，你仍然需要提供適當?shù)?fallback 方案。
一點點個人想法
長期以來，CSS 都是強大的布局工具，但如今有了 calc-size()，CSS 布局即將進入全新紀元：
- 布局自動響應(yīng)內(nèi)容的實時狀態(tài)和屬性
- 不再需要 JavaScript 來實現(xiàn)基礎(chǔ)布局邏輯
- 動態(tài)布局組件終于真正原生化
在我看來，這將開啟無限的新可能，比如：
- 動態(tài)星級評分組件
- 自動調(diào)整高度的手風(fēng)琴菜單
- 智能進度條
- 自適應(yīng)圖片網(wǎng)格
- 基于內(nèi)容長度自動調(diào)整的工具提示（tooltip）
以上這些，以后都可以通過原生 CSS 輕松實現(xiàn)。
