我有一支技术全面、经验丰富的小型团队，专注高效交付中等规模外包项目，有需要外包项目的可以联系我

2025 年 CSS 真的开始“夺权”了：18 个你大概率没听过的新特性

各位前端同学——

2025 快结束了，你可能听过一些 CSS 的大更新：容器查询、嵌套更顺手了、Anchor API 更成熟了……这些都算“有动静”。

但我敢打赌：下面这 18 个，你至少有一半没认真看过。

它们背后有一条很明确的主线：

少写 JavaScript，多让 CSS 自己干活。

因为我们都懂：能删一行 JS，就像给项目减一次肥。

好，直接上菜。

1. Invoker Commands：按钮终于能“自己开弹窗”了

以前你想开 dialog / popover，十有八九得写点击事件。现在可以更“原生”一点：只用 HTML。

<button commandfor="myDialog" command="show-modal">
  Open dialog
</button>

<dialog id="myDialog">
  Hello!
</dialog>

• command 告诉浏览器要执行什么动作（例如 show-modal、close、toggle-popover）

• commandfor 用 ID 把按钮和目标元素绑起来 一句话：动作交给浏览器，你别当保姆。

2. Dialog Light Dismiss（closedby）：你说了算怎么关

弹窗能不能点外面关闭？ESC 能不能关？以前要自己处理，现在直接一个属性。

<dialog closedby="any">
  Click outside or press ESC
</dialog>

• any / none / escape 控制关闭方式 这类细节一到位，网页交互立刻“像个 App”。

3. popover="hint"：有些弹层就该“轻一点”

有些 popover 是提示，不该把别的菜单都挤下线。hint 就是给它的“低优先级身份证”。

<button popovertarget="tip">?</button>

<div id="tip" popover="hint">
  Helpful text
</div>

适合：tooltip、小帮助气泡、预览卡片。 你会发现：交互冲突少了，页面气质也干净了。

4. 完全可自定义的 <select>：CSS 终于摸到它的灵魂了

多年来 <select> 像个“带封印的组件”，你想好好做样式？它就装死。 现在，Chrome 这边开始给出更可控的“基础外观模式”。

select {
  appearance: base-select;
}

重点是：你能更自由地样式化内部结构，同时保留原生可访问性与键盘体验。

5. 原生 CSS Carousel：轮播不写 JS 也能像回事

轮播这玩意儿，过去不是插件就是手搓。现在有了更偏原生的滚动按钮伪元素思路：

.carousel::scroll-button(left) {
  content: "<";
}

.carousel::scroll-button(right) {
  content: ">";
}

更爽的是：浏览器能帮你处理一部分键盘/滚动交互逻辑。 终于不用为了一个轮播去“引入一座 JS 山”。

6. scroll-target-group 和 :target-current：目录高亮不用监听滚动了

你做过文章目录（TOC）就知道：要“滚到哪就高亮哪”，以前基本离不开监听/Observer。现在 CSS 开始接手这活：

nav {
  scroll-target-group: auto;
}

:target-current {
  font-weight: bold;
}

效果：用户滚动时，当前目标自动更新，你的样式跟着变。

7. Anchored Container Queries：tooltip 翻面，CSS 也能知道

锚点定位时，tooltip 翻到上面还是下面？以前你要 JS 算。现在浏览器能暴露状态，让 CSS 去响应。

@container style(--anchor-flipped: true) {
  .tooltip {
    background: black;
  }
}

这类能力一旦普及，会让“定位类 UI”的心智成本下降很多。

8. Interest Invokers（interestfor）：不止 hover，浏览器懂“你感兴趣”

hover 在触屏设备上有多尴尬，你懂的。interestfor 的思路是： 让浏览器判断“用户是否表现出兴趣”（鼠标/键盘/触摸都算）。

<button interestfor="info">Info</button>

<div id="info" popover="hint">
  Details
</div>

这更像“意图驱动”的交互，而不是死盯着 hover。

9. Scroll State Queries：谁卡住了、谁可滚动，CSS 自己判断

以前你要知道 sticky 现在是否“吸住了”，得上 JS。现在开始有更原生的滚动状态查询能力。

@container scroll-state(stuck) {
  header {
    background: white;
  }
}

典型用途：sticky 吸顶后换背景、加阴影、改变布局，全部交给 CSS。

10. Tree Counting Functions：CSS 终于会数数了

你想根据元素在兄弟节点中的位置做动画延迟？以前要 JS 算 index。现在 CSS 开始提供“数数函数”的方向：

.item {
  animation-delay: calc(sibling-index() * 100ms);
}

类似 sibling-count() 也能告诉你有多少兄弟。 动画与布局会因此更“声明式”。

11. Nested View Transitions：过渡更细腻，分组还能套娃

View Transition 本来就香，现在还能更细地做分组/嵌套控制，动效连贯度更高。

::view-transition-group(card) {
  animation-duration: 300ms;
}

你会更容易做出那种“页面在呼吸”的过渡，而不是硬切。

12. moveBefore()：移动 DOM，但状态不重置

你移动节点，最怕视频停了、输入框丢焦点、组件状态炸了。moveBefore() 的目标就是：移动，但不销毁。

parent.moveBefore(card, otherCard);

做复杂 UI 重排/动效衔接会更舒服。

13. Typed attr()：属性不再只是字符串

以前 attr() 在很多场景里“像个摆设”。现在开始支持把属性按类型读出来（比如 length）。

.box {
  width: attr(data-size length);
}

<div class="box" data-size="200px"></div>

这对“配置驱动样式”的玩法很关键。

14. text-box：文字终于不再“看着不对但说不清”

设计师最恨的事情之一：同一个字号，不同字体，视觉对齐永远差一点。text-box 试图让浏览器按真实字体度量来裁切/对齐。

h1 {
  text-box: trim-both cap alphabetic;
}

你会发现标题不再“虚浮”，行高也更像设计稿。

15. shape()：复杂裁切直接写 CSS，不用 SVG 绕路

clip-path 很强，但复杂路径一直不够优雅。shape() 让你能更直接地在 CSS 里描述路径。

.card {
  clip-path: shape(from 0 0, line to 100% 0, line to 80% 100%);
}

更适合响应式、可动画的裁切形状。

16. CSS @function：CSS 也能写“可复用逻辑”了

这不是 Sass，不是预处理器，而是 CSS 自己想学会“函数”。Chrome 这块还经历了推迟发布与持续实验。

@function radius(size) {
  return max(8px, size);
}
.card {
  border-radius: radius(12px);
}

一旦这类能力稳定，你的设计系统会更像“可维护的代码”，而不是“堆出来的样式”。

17. 更直观的范围比较语法：别再跟 min/max-width 斗智斗勇

更符合人类直觉的范围写法，其实这些年就在推进（媒体查询 Range Syntax 等）。

你终于可以用更像“数学不等式”的方式写范围条件，而不是反复切换 min/max 心智。

18. corner-shape：圆角终于有性格了（不只圆）

border-radius 玩久了会腻：你想要“凹角”“缺口”“squircle”，以前全靠 clip-path / SVG。corner-shape 让角的形状本身可配置，还能动画过渡；目前属于非常新的实现方向。 ([zhangxinxu.com][16])

.card {
  corner-shape: squircle;
}

兼容性提醒：别兴奋到忘了现实

很多能力目前主要在 Chromium/Chrome 的新版本与实验特性里推进（有些需要 Canary 或开启实验性平台功能），其他浏览器会逐步跟进。 稳妥做法：用 @supports 做特性检测。 ([Chrome for Developers][9])

@supports (corner-shape: squircle) {
  .card {
    corner-shape: squircle;
  }
}

结尾：CSS 不是“小弟”了，它开始自己做决定

2025 的 CSS，越来越不像“被 JS 使唤的样式表”。它能响应用户、能表达状态、能控制交互，而且在性能与可访问性上更接近原生。

这不代表 JavaScript 没用。 而是 JS 终于可以回到它擅长的地方：数据、业务、流程。 把按钮、弹窗、提示、滚动状态这些“琐碎 babysitting”，交还给浏览器。

这才是健康的分工。

——下次再一起挖一个 CSS 新彩蛋。

全栈AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击二维码了解更多详情。

最后：

CSS终极指南  

Vue 设计模式实战指南 

20个前端开发者必备的响应式布局

深入React:从基础到最佳实践完整攻略

python 技巧精讲

React Hook 深入浅出

CSS技巧与案例详解

vue2与vue3技巧合集