你需要了解的现代 CSS（2025 版）

October 1, 2025

翻译自：https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-2025-edition/

我们去年（2024）发布了《你需要了解的现代 CSS》，当时我还不确定一年后是否有足够的新内容值得再写一版。但时间和 CSS 都在进步，结果呢？今年的新内容比去年还多。至少在这个有点主观的“Chris 认为值得了解的新鲜或获得了浏览器支持提升的东西”列表里是这样。

动画到 auto

这是什么？

我们通常不会为包含任意内容的元素设置 height，而是让它们根据内容自适应高度。问题在于，我们一直无法将高度从一个固定值（如 0）动画到其本身的高度（或反过来）。换句话说，无法动画到 auto（或其他类似的尺寸关键字，如 min-content 等）。

现在，我们可以选择性地允许动画到这些关键字，例如：

css

html {
    interpolate-size: allow-keywords;
    /* 现在如果我们在任何地方 transition
     "height: 0;" 到 "height: auto;"
     都能生效 */
}

如果不想全局开启，也可以用 calc-size() 函数实现 transition，无需 interpolate-size：

css

.content {
    height: 3lh;
    overflow: hidden;
    transition: height 0.2s;

    &.expanded {
        height: calc-size(auto, size);
    }
}

为什么要关心？

这是 CSS 首次原生支持这种动画。实际开发中这种需求很常见，现在可以非常自然地实现，而不会破坏行为。

而且不仅仅是 height，任何接受尺寸的属性都可以；也不仅仅是 auto，其他尺寸关键字也可以。

支持情况

支持情况	说明
浏览器支持	仅 Chrome
渐进增强	可以！通常这种动画不是硬性需求，只是锦上添花
Polyfill	基本没有。以前的做法是动画 `max-height` 到一个很大的值，或者用 JS 计算尺寸再动画，体验都不好

使用示例

Popovers & Invokers

这些是独立且实用的功能，主要偏向 HTML，但它们互补，值得一起介绍。

这是什么？

popover 是你可以加在任何 HTML 元素上的属性，赋予其打开/关闭的功能，并有 JS API 控制。它和模态框类似但不同，更像是 tooltip 或可以同时打开多个的东西。

Invoker 也是 HTML 属性，让我们可以用声明式的方式在标记中调用这些 JS API。

为什么要关心？

在 HTML 层实现功能非常强大。无需 JS 就能工作，且可访问性好，用户体验细节也更容易做对。

支持情况

支持情况	说明
浏览器支持	Popover 各浏览器都支持，但 invokers 目前仅 Chrome。子功能如 `popover="hint"` 支持略少。
渐进增强	不太适用。这类功能通常必须“能用”，建议用 polyfill 保证一致性。
Polyfill	有！Popovers Polyfill / Invokers Polyfill

使用示例

记住 popover 也有 JS API，如 myPopover.showPopover() 和 secondPopover.hidePopover()，但这里展示的是 HTML 的 invoker 控制。还有其他 HTML 控制方式（如 popovertarget="mypopover" popovertargetaction="show"），但我更喜欢通用的 command invokers 方法。

另外 —— popover 和锚点定位（anchor positioning）配合特别好，这也是现代 CSS 的奇迹之一。

@function

这是什么？

CSS 已经有很多函数，比如 calc()、attr()、clamp()，还有很多。它们其实叫 CSS 值函数，总是返回一个值。

@function 的魔力在于——你可以自己写函数了。

css

@function --titleBuilder(--name) {
    result: var(--name) " is cool.";
}

为什么要关心？

将逻辑抽象为函数是计算机编程的基本思想。把代码和逻辑集中在一个地方而不是重复写，能让 CSS 更简洁、可维护。

支持情况

支持情况	说明
浏览器支持	仅 Chrome
渐进增强	取决于你用它做什么。如果可以接受回退值，可以这样写： `property: fallback; property: --function();`
Polyfill	没有。Sass 有函数但不是同一规范，不能直接用。

使用示例

其他资源

Una Kravets: 5 个有用的 CSS @function 用法
Bramus Van Damme: CSS @function + CSS if() = 🤯
Juan Diego Rodríguez: CSS 里的函数？！
草案: CSS Functions and Mixins Module

if()

这是什么？

从概念上说，CSS 里已经有很多条件逻辑。选择器本身就是“如果”匹配就应用样式，媒体查询也是“如果”条件成立就生效。

但 if() 函数是第一个专门用于逻辑分支的 CSS 构造。

为什么要关心？

和所有函数一样，包括上面自定义的 @function，if() 返回一个值。它的语法让代码更易读，也能减少重复。

支持情况

支持情况	说明
浏览器支持	仅 Chrome
渐进增强	取决于你用它做什么。如果可以接受回退值，可以这样写： `property: fallback; property: if( style(--x: true): value; else: fallback; );`
Polyfill	没有。CSS 预处理器有类似逻辑，但不会基于动态值和 DOM 重新计算。

使用示例

将逻辑写进一个值里很酷！

css

.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 语句，可以有任意多个条件，匹配到第一个就用。

css

if(
  condition: value;
  condition: value;
  else: value;
)

条件可以是：

media()
supports()
style()

field-sizing

这是什么？

CSS 新增的 field-sizing 属性可以让表单字段（或任何可编辑元素）根据内容自动增长。

为什么要关心？

开发者一直用 JS 实现这个需求，最典型的例子是 <textarea>，让它根据用户输入自动变大，无需手动调整（尤其在小屏幕上很难操作）。当然，内联调整大小也不错。

支持情况

支持情况	说明
浏览器支持	Chrome，Safari 很快也会支持
渐进增强	可以！通常只是提升用户体验，不是硬性需求
Polyfill	有非常轻量的 JS 实现

使用示例

自定义 Select

这是什么？

给 <select> 外观做样式已经可以实现，但下拉菜单内容一直是操作系统自带的样式。现在你可以选择完全自定义 select 菜单的样式。

为什么要关心？

（原文未写，略）

支持情况

支持情况	说明
浏览器支持	仅 Chrome
渐进增强	100%。会回退为未自定义样式的 `<select>`，也没问题
Polyfill	以前 `<selectlist>` 时代有 polyfill，但现在渐进增强很好，不需要

使用示例

先 opt-in，然后随意发挥。

css

select,
::picker(select) {
    appearance: base-select;
}

text-wrap

这是什么？

CSS 的 text-wrap 属性可以让浏览器以不同方式换行。例如，text-wrap: balance; 会让每行长度尽量接近。

为什么要关心？

这对大字号元素（如标题）来说是更好的默认值。它也能避免单词孤零零地出现在下一行（孤儿），而 text-wrap: pretty; 也能做到，并且专为长文本设计，让文本更易读。总之：免费获得更好的排版。

支持情况

支持情况	说明
浏览器支持	`balance` 各浏览器都支持，`pretty` 目前仅 Chrome 和 Safari
渐进增强	绝对可以。即使没有这些增强，文本依然可读可访问
Polyfill	`balance` 有 polyfill

使用示例

资源

Jen Simmons: Better typography with text-wrap pretty
Stephanie Stimac: When to use CSS text-wrap: balance; vs text-wrap: pretty;

linear() 缓动

这是什么？

这个有点让人困惑，因为 linear 作为 transition-timing-function 或 animation-timing-function 的关键字，意味着“线性无变化”（有时正是你想要的，比如透明度变化）。但 linear() 函数实际上可以实现非常花哨的缓动，比如“弹跳”效果。

为什么要关心？

即使是 cubic-bezier() 也只能做有限的弹跳动画，而 linear() 可以接受无限个点，效果更丰富。

支持情况

支持情况	说明
浏览器支持	全面支持
渐进增强	可以！可以回退到命名缓动值或 `cubic-bezier()`
Polyfill	没有，但如果你很在意 fancy 缓动，GSAP 这类 JS 库都能实现

使用示例

css

.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
    );
}

资源

Jake Archibald: linear() easing generator
Matthias Martin: Easing Wizard

shape()

这是什么？

CSS 早有 path() 函数，但它只能 1:1 复制 SVG <path> 的 d 属性，只能用像素单位，语法也不太友好。shape() 函数则是为 CSS 量身定制的升级版。

为什么要关心？

shape() 函数几乎可以画任何东西。可以用在 clip-path，让元素变任意形状，且支持响应式、CSS 单位、自定义属性、媒体查询等。也可以用在 offset-path()，让元素沿任意路径运动。未来还会支持 shape-outside。

支持情况

支持情况	说明
浏览器支持	Chrome、Safari 已支持，Firefox 也在开发，很快就全面了
渐进增强	基本可以！裁剪和路径动画通常是美化，回退到普通样式也没问题
Polyfill	没有，建议做好回退方案

使用示例

任何 SVG 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%,
        line by 18.207445% 24.648236%,
        hline by -67.368705%,
        curve by -7.368452% 9.914818% with -4.103596% 0% / -7.368452% 4.393114%,
        smooth by 7.368452% 9.914818% with 3.264856% 9.914818%,
        hline by 67.368705%,
        line by -18.211656% 24.50518%,
        curve by 0% 14.020119% with -2.841275% 3.823154% / -2.841275% 10.196965%,
        curve by 5.26318% 2.976712% with 1.472006% 1.980697% / 3.367593% 2.976712%,
        smooth by 5.26318% -2.976712% with 3.791174% -0.990377%,
        line by 30.735919% -41.357537%,
        curve by 2.21222% -7.082013% with 1.369269% -1.842456% / 2.21222% -4.393114%,
        smooth by -2.21222% -7.082013% with -0.736024% -5.239556%,
        close
    );
}

天然支持缩放，语法也比 path() 更易读：

更强大的 attr()

这是什么？

CSS 的 attr() 函数可以获取匹配元素的字符串值。例如 <div data-name="Chris"> 可以用 div::before { content: attr(data-name); } 得到 "Chris"。现在，你可以为获取的值指定类型，更实用。

为什么要关心？

数字和颜色等类型比字符串更有用，可以直接用于样式。

xml

attr(data-count type(<number>))

支持情况

支持情况	说明
浏览器支持	仅 Chrome
渐进增强	取决于你用它做什么。如果只是美化，没问题；如果是布局核心信息，则不建议依赖
Polyfill	没有

使用示例

reading-flow

这是什么？

有多种方式可以让视觉顺序和源码顺序不一致。新的 reading-order 属性允许我们在改变布局顺序时，让 Tab 键导航顺序也能合理。

为什么要关心？

长期以来我们被告知：不要随意重排布局！源码顺序应尽量和视觉顺序一致，否则 Tab 导航会变得混乱甚至导致滚动，影响可访问性。现在我们可以告诉浏览器按布局顺序导航。

支持情况

支持情况	说明
浏览器支持	仅 Chrome
渐进增强	不太适用。建议等所有浏览器都支持后再广泛使用
Polyfill	没有，但可以用 JS 动态设置 `tabindex` 实现

使用示例

css

.grid {
    reading-flow: grid-rows;
}

重排 grid 布局是最常见的需求，让 Tab 顺序跟随行顺序很合理。你需要根据实际布局设置对应值，比如 flexbox 用 flex-flow。MDN 有完整值列表。

资源

Rachel Andrew: Reading flow ships in Chrome 137
Daniel Schwarz: What We Know (So Far) About CSS Reading Order
Di Zhang: Use CSS reading-flow for logical sequential focus navigation

值得关注的新特性

“Masonry” 布局虽然有多种初步实现，但还未最终定稿，预计明年会有进展。最有趣的是 item-flow 的提案，不仅能帮助 Masonry，还能为 grid 以外的布局带来新可能。
CSS 函数 random() 已在 Safari 支持，非常酷。
CSS 属性 margin-trim 很实用，期待能在更多浏览器用上。
sibling-index() 和 sibling-count() 已在 Chrome 支持，非常适合做错位动画。
View Transitions 里的 view-transition-name: match-element; 很方便，无需为每个元素生成唯一名。Firefox 也在开发 View Transitions，意义重大。
很快我们就能用 calc() 进行带单位的乘除（不再要求第二个参数无单位），不再需要 hack。
我们没等到“CSS4”（Zoran 解释得很好），但我认为有个命名版本系统对大家都有好处。
如果你想看近 5 年“新 CSS 特性”清单，Adam Argyle 有个很棒的列表。

值得记住的好东西

容器查询（及单位）依然是 CSS 继媒体查询之后最棒的特性。
:has() 伪类非常适合选择有特定子元素或状态的元素。
超酷的现代 CSS 特性如 View Transitions、Anchor Positioning、Scroll-Driven Animations 都已登陆 Safari。
所有有用的额外视口单位（比如 dvh）现在都已成为基线。

←Back to home

This work is licensed under CC BY-NC-SA 4.0

NickName

E-Mail

Website

Comments

Latest
Oldest
Hottest

No comment yet.

YieldRay

你需要了解的现代 CSS（2025 版）

Preview: