我有一支技术全面、经验丰富的小型团队，专注高效交付中等规模外包项目，有需要外包项目的可以联系我
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">这对“配置驱动样式”的玩法很关键。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技巧合集
