大家好，我是 Immerse，一名獨立開發者、內容創作者、AGI 實踐者。
關注公眾號：沉浸式趣談，獲取最新文章（更多內容只在公眾號更新）
個人網站：https://yaolifeng.com 也同步更新。
轉載請在文章開頭註明出處和版權信息。
我會在這裏分享關於編程、獨立開發、AI乾貨、開源、個人思考等內容。
如果本文對您有所幫助，歡迎動動小手指一鍵三連(點贊、評論、轉發)，給我一些支持和鼓勵，謝謝！
2025年了，CSS又進化了
去年寫過一篇 CSS 新特性盤點，本來以為今年不會有太大變化。結果一看，新東西比去年還多。
這次整理了幾個我覺得特別實用的功能，瀏覽器支持也都不錯，可以用起來了。
終於可以動畫到 auto 了
之前我們做高度展開動畫，基本都是靠 max-height 硬撐。
比如從 0 展開到實際高度，只能寫個超大的值，體驗很差。
現在可以直接動畫到 auto 了：
html {
interpolate-size: allow-keywords;
}加上這一行，所有 height: 0 到 height: auto 的過渡都能生效。
或者你也可以用 calc-size() 函數，不需要全局設置：
.content {
height: 3lh;
overflow: hidden;
transition: height 0.2s;
&.expanded {
height: calc-size(auto, size);
}
}這個功能總算來了。
而且不只是 height，任何接受尺寸的屬性都能用，不只是 auto，min-content 這些關鍵字也行。
目前 Chrome 已經支持，其他瀏覽器應該也快了。
Popover 和 Invoker
Popover 是個 HTML 屬性，給任意元素加上就有開關功能。
配合 Invoker 用起來更爽，不用寫 JavaScript 就能控制彈窗。
<button commandfor="menu" command="toggle">
打開菜單
</button>
<div id="menu" popover>
菜單內容
</div>這樣就夠了，按鈕點擊自動控制彈窗顯示隱藏。
瀏覽器會自動處理無障礙訪問、鍵盤操作、焦點管理這些細節。
而且還能配合 Anchor Positioning 用，讓彈窗自動定位到觸發元素旁邊。
Popover 已經全瀏覽器支持，Invoker 目前只有 Chrome，不過有 polyfill 可以用。
CSS 裏可以寫函數了
CSS 有 calc()、clamp() 這些內置函數，現在我們可以自己寫了：
@function --titleBuilder(--name) {
result: var(--name) " is cool.";
}然後就能在任何地方調用：
.title::after {
content: --titleBuilder("CSS");
}這個功能讓 CSS 更像編程語言了。
把複雜邏輯封裝到函數裏，代碼更清爽，也更好維護。
不過目前只有 Chrome 支持，可以先用着，不支持的瀏覽器會回退到默認值。
if() 函數也來了
CSS 本來就有很多條件邏輯，比如選擇器匹配、媒體查詢。
但這次的 if() 函數是第一個專門做條件分支的：
.grid {
display: grid;
grid-template-columns:
if(
media(max-width > 300px): repeat(2, 1fr);
media(max-width > 600px): repeat(3, 1fr);
media(max-width > 900px): repeat(auto-fit, minmax(250px, 1fr));
else: 1fr;
);
}看起來像不像 switch 語句？第一個匹配的條件會生效。
條件可以是 media()、supports()、style() 這幾種。
把所有邏輯都寫在一個屬性裏，代碼可讀性好很多。
目前 Chrome 獨佔，其他瀏覽器還在路上。
表單輸入框自動調整大小
field-sizing 這個屬性專門解決表單輸入框的問題。
textarea {
field-sizing: content;
}加上這一行，textarea 會自動根據內容調整高度。
用户輸入多少內容，輸入框就有多高，不用手動拖拽了。
在手機上體驗特別好，拖拽調整大小本來就很難操作。
這個功能之前都是用 JavaScript 實現，現在 CSS 原生支持了。
Chrome 和 Safari 都能用，Firefox 估計也快了。
select 下拉框終於能自定義樣式了
select 元素的外觀一直很難自定義，打開後顯示的選項更是完全沒法控制。
現在可以完全自定義了，只要先開啓：
select,
::picker(select) {
appearance: base-select;
}然後想怎麼改就怎麼改，選項的樣式、佈局、動畫都能控制。
目前 Chrome 獨佔，不過不支持的瀏覽器會回退到原生樣式，完全不影響使用。
text-wrap 讓排版更好看
text-wrap: balance 可以讓每行文字長度儘量接近：
h1 {
text-wrap: balance;
}用在標題上效果特別好，不會出現最後一行只有一個詞的情況。
還有個 text-wrap: pretty，專門優化正文排版：
p {
text-wrap: pretty;
}瀏覽器會自動調整斷行，避免孤詞，讓文字看起來更舒服。
balance 已經全瀏覽器支持，pretty 在 Chrome 和 Safari 能用。
這種優化對用户體驗很重要，而且完全不影響功能，可以直接加上。
linear() 實現複雜緩動效果
CSS 的 linear 關鍵字之前就是勻速動畫，很無聊。
但 linear() 函數可以實現超複雜的緩動，比如彈跳效果：
.bounce {
animation-timing-function: linear(
0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,
1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,
0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,
0.973, 1, 0.988, 0.984, 0.988, 1
);
}這種效果用 cubic-bezier() 根本做不出來。
而且已經全瀏覽器支持了，可以放心用。
有在線工具可以生成這些值，不用自己手寫。
shape() 函數畫任意圖形
CSS 之前有 path() 函數，但語法很難寫，而且只能用像素。
shape() 是專門為 CSS 設計的，支持所有單位和自定義屬性：
.arrow {
clip-path: shape(
evenodd from 97.788201% 41.50201%,
line by -30.839077% -41.50201%,
curve by -10.419412% 0% with -2.841275% -3.823154% / -7.578137% -3.823154%,
smooth by 0% 14.020119% with -2.841275% 10.196965%,
close
);
}可以用在 clip-path 裁剪元素，也能用在 offset-path 做路徑動畫。
而且可以響應式調整，配合媒體查詢和容器查詢都沒問題。
Chrome 和 Safari 已經支持，Firefox 也在開發中。
attr() 變強了
之前 attr() 只能取字符串，現在可以指定類型了：
<div data-count="42" data-color="#ff0000">div {
--count: attr(data-count type(<number>));
--color: attr(data-color type(<color>));
}這樣可以直接把 HTML 屬性當數字或顏色用，方便多了。
目前 Chrome 獨佔，不過對於不支持的瀏覽器，可以設置回退值。
reading-flow 解決 Tab 順序問題
用 Grid 或 Flexbox 重新排列元素後，Tab 鍵的焦點順序會亂。
現在可以用 reading-flow 告訴瀏覽器按照視覺順序來：
.grid {
reading-flow: grid-rows;
}這樣焦點就會按照 Grid 的行順序移動，不會亂跳了。
Flexbox 用 flex-flow，其他佈局也有對應的值。
這個功能對無障礙訪問很重要，不過目前只有 Chrome 支持。
等其他瀏覽器跟進之前，最好不要大量重排佈局。
值得期待的功能
還有一些功能在開發中，但還沒正式發佈：
Masonry 佈局雖然各瀏覽器實現不同，但在穩步推進。
Safari 的 random() 函數可以生成隨機數，玩起來很有意思。
margin-trim 可以自動去掉容器邊緣元素的外邊距，Safari 獨佔中。
sibling-index() 和 sibling-count() 函數在 Chrome 能用，做交錯動畫很方便。
View Transitions 的 match-element 不用給每個元素起名字了，而且 Firefox 也在開發中。
還有很多其他功能在路上。
別忘了這些已經能用的
Container Queries 和 :has() 這些去年的新功能，現在已經全瀏覽器支持。
View Transitions、Anchor Positioning、Scroll-Driven Animations 也都在 Safari 上線了。
dvh 這些視口單位也成為標準了。
CSS 現在能做的事情越來越多，寫起來也越來越順手。
參考：https://frontendmasters.com/blog/what-you-need-to-know-about-...
其他好文推薦
2025 最新！獨立開發者窮鬼套餐
Windows 安裝 Claude Code 的新姿勢，保姆級教程
Claude Code 從入門到精通：最全配置指南和工具推薦
Claude Code 終極配置指南：一行命令搞定各種配置
一個配置文件搞定！Claude Code 多模型智能切換
這個 361k Star 的項目，一定要收藏！
搞定 XLSX 預覽？別瞎找了，這幾個庫（尤其最後一個）真香！
【完整彙總】近 5 年 JavaScript 新特性完整總覽
關於 Node，一定要學這個 10+萬 Star 項目！
