29个CSS新特性一网打尽：每个都标注阶段+实战案例，看完省下80%查文档时间

程序员阿峰
0 阅读14分钟

各位攻城狮们，之前写了《 这5个CSS新特性已经强到离谱，攻城狮直呼内行》，收藏量不少，并且有大佬反馈建议附加Stage标注版。那这...我必须安排上。 今天特意整理了29个CSS新特性，附加Stage标注版，有需要的大佬建议收藏。

根据最新的CSS规范、浏览器发展以及社区的讨论，目前涌现的CSS新特性可以大致分为布局与结构、交互与逻辑、视觉与表现、数据查询与动画以及组件与表单五大类。

🧱 布局与结构

  • CSS 嵌套 (Nesting) ：原生支持类似Sass的嵌套语法，提升代码可读性和组织性，减少预处理器依赖。
  • Subgrid：让网格项继承父网格的轨道定义，解决子内容与父网格对齐的难题，尤其适合复杂表单和杂志风格排版。
  • :has() 父选择器：被称为"父选择器"，可以根据子元素的状态来选择父元素，实现"包含"逻辑，例如表单验证高亮。
  • Masonry 瀑布流布局：作为CSS Grid的一部分进行标准化，旨在用一行代码（如 grid-template-rows: masonry;）解决Pinterest式布局。
  • 锚点定位 (Anchor Positioning) ：彻底取代Popper.js，原生实现弹窗、工具提示、下拉菜单等元素相对于其他元素的复杂定位。

  • W3C规范阶段说明

根据W3C流程，规范主要经历以下几个阶段：

  • ED (Editor's Draft，编辑草案) ：编辑人员的工作副本，可能随时变化，不代表工作组共识
  • WD (Working Draft，工作草案) ：设计阶段，工作组根据反馈迭代规范
  • CR (Candidate Recommendation，候选推荐标准) ：测试阶段，需两个独立实现才能进入下一阶段
  • REC (Recommendation，正式推荐标准) ：完成状态，代表维护阶段
特性规范阶段简要说明
CSS 嵌套 (Nesting)REC已被CSS Snapshot 2026收录为稳定规范，现代浏览器全支持
SubgridCRCSS Grid Level 3的一部分，Interop项目推动下已基本稳定
:has() 父选择器REC选择器Level 4规范，已修复解析问题，现代浏览器全支持
Masonry 瀑布流布局ED/WDCSS Grid Level 3的扩展，目前仅Safari实验性支持
锚点定位 (Anchor Positioning)WDCSS Anchor Positioning规范，Chrome已支持，Safari/Firefox开发中

1. CSS 嵌套 (Nesting)

css

.card {
  padding: 1rem;
  border: 1px solid #ccc;

  & h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  & p {
    color: #333;
    & span {
      font-weight: bold;
    }
  }
}

/* Stage: REC 【正式推荐标准，可放心用于生产环境】（附加说明：已被CSS Snapshot 2026收录为稳定规范[](https://drafts.csswg.org/css-2026/)，现代浏览器全支持）*/

2. Subgrid

css

.grid-parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid-child {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid; /* 继承父网格的行轨道 */
}

/* Stage: CR 【候选推荐标准，需要两个独立实现，基本稳定】（附加说明：CSS Grid Level 3的一部分，Interop项目推动下已基本稳定）*/

3. :has() 父选择器

css

/* 如果表单字段有无效输入，高亮其父容器 */
.field:has(:invalid) {
  border-color: red;
  background: #ffeeee;
}

/* 包含特定图标的卡片 */
.card:has(.icon-star) {
  border: 2px solid gold;
}

/* Stage: REC 【正式推荐标准，可放心用于生产环境】（附加说明：选择器Level 4规范，已修复解析问题，现代浏览器全支持）*/

4. Masonry 瀑布流布局

css

.masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry; /* 瀑布流模式 */
}

/* Stage: ED 【编辑草案，实验性，可能变化】 （附加说明：CSS Grid Level 3的扩展，目前仅Safari实验性支持）*/

5. 锚点定位 (Anchor Positioning)

html

<button id="anchor">点击我</button>
<div class="tooltip">我是提示框</div>

css

#anchor {
  anchor-name: --my-anchor;
}
.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}
/* Stage: WD 【工作草案，设计阶段，需关注浏览器支持】（附加说明：CSS Anchor Positioning规范，Chrome已支持，Safari/Firefox开发中）*/

⚡️交互与逻辑

  • 滚动驱动动画 (Scroll-driven Animations) ：用CSS代替Intersection Observer和scroll事件监听，实现视差滚动、阅读进度条等高性能动画，动画进度与滚动进度直接关联。
  • @starting-style 规则：为首次渲染或 display 从 none 切换过来的元素提供起始样式，用于实现进入和退出过渡动画。
  • if() 条件语句：让CSS真正具备逻辑判断能力，根据媒体、支持性或样式查询在一个属性内动态赋值。
  • 状态查询 (Scroll State Queries) ：通过 @container scroll-state 查询元素是否处于吸附(stuck)、捕捉(snapped)或溢出状态，告别IntersectionObserver。
  • sibling-index() 和 sibling-count() ：解决列表项计数问题，无需在HTML中硬编码自定义属性，轻松实现交错动画。
  • interpolate-size 属性和 calc-size() 函数：终于可以平滑地过渡到 height: auto 这类 intrinsic 尺寸，解决了长久以来的动画难题。

  • W3C流程规范阶段

特性规范阶段简要说明
滚动驱动动画WDScroll-driven Animations规范，Chrome已支持
@starting-style 规则CRCSS Transitions Level 2的一部分，Baseline 2024新推出
if() 条件语句EDCSS Conditional Values规范草案，Chrome实验性支持
状态查询 (Scroll State)WDCSS Conditional Rules Level 5，Chrome 144/Edge 144已支持
sibling-index() / sibling-count()ED实验性功能，浏览器兼容性差，建议用:nth-child替代
interpolate-size / calc-size()WDCSS Values and Units规范，仍在完善百分比处理

6. 滚动驱动动画

css

@keyframes grow {
  from { scale: 0.5; }
  to { scale: 1.5; }
}

.progress-bar {
  animation: grow linear;
  animation-timeline: scroll(); /* 滚动驱动 */
}
/* Stage: WD 【工作草案，设计阶段，需关注浏览器支持】（附加说明：Scroll-driven Animations规范，Chrome已支持）*/

7. @starting-style 规则

css

.popover {
  opacity: 0;
  transition: opacity 0.3s;

  @starting-style {
    opacity: 0; /* 进入动画起点 */
  }
}

.popover:popover-open {
  opacity: 1;
}
/* Stage: CR 【候选推荐标准，需要两个独立实现，基本稳定】（附加说明：CSS Transitions Level 2的一部分，Baseline 2024新推出）*/

8. if() 条件语句

css

.card {
  background-color: if(style(--theme: dark), #333, white);
  padding: if(supports(display: grid), 2rem, 1rem);
}
/* Stage: ED【编辑草案，实验性，可能变化】 （附加说明：CSS Conditional Values规范草案，Chrome实验性支持）*/

9. 状态查询 (Scroll State Queries)

css

@container scroll-state(stuck: top) {
  .header {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
}
/* Stage: WD【工作草案，设计阶段，需关注浏览器支持】 （附加说明：CSS Conditional Rules Level 5，Chrome 144/Edge 144已支持）*/

10. sibling-index() 和 sibling-count()

css

li {
  animation: fade-in 0.3s calc(0.1s * sibling-index()) both;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
}
/* Stage: ED 【编辑草案，实验性，可能变化】（附加说明：实验性功能，浏览器兼容性差，建议用`:nth-child`替代）*/

11. interpolate-size 和 calc-size()

css

.accordion {
  interpolate-size: allow-keywords;
  height: 0;
  transition: height 0.3s;
}
.accordion.open {
  height: calc-size(auto, size); /* 从0到auto平滑过渡 */
}
/* Stage: WD【工作草案，设计阶段，需关注浏览器支持】 （附加说明：CSS Values and Units规范，仍在完善百分比处理）*/

🎨 视觉与表现

  • @function 自定义函数：允许开发者编写自己的CSS函数，抽象和复用复杂的逻辑或计算，让代码更DRY。
  • corner-shape 和 shape() 函数：corner-shape 可创建花哨的形状（如" squircles"），而 shape() 函数能用更CSS原生的方式绘制复杂裁剪路径。
  • text-wrap: balance 和 pretty：优化文本排版，balance 可平衡标题行长度，pretty 可避免段落末尾出现孤行。
  • field-sizing 属性：让表单元素（如 textarea）根据内容自动调整尺寸。
  • 高级 attr() 函数：在原有的基础上扩展，允许读取HTML任意属性的值，并支持类型转换（如颜色、数字），极大增强动态性。
  • contrast-color() 函数：根据背景色动态计算前景色（黑或白），确保足够的颜色对比度。
  • zoom 属性：虽然是老面孔，但终于在2024年成为Baseline新可用特性，用于缩放元素且会影响布局。

  • W3C流程规范阶段

特性规范阶段简要说明
@function 自定义函数EDCSS Functions规范草案，提案阶段
corner-shape 和 shape()EDCSS Shapes Level 2，仍在设计阶段
text-wrap: balance / prettyCRCSS Text Level 4，跨浏览器支持良好
field-sizing 属性WDCSS Basic User Interface Level 4，Chrome已支持
高级 attr() 函数WDCSS Values and Units Level 5，Interop 2026重点之一
contrast-color() 函数WDCSS Color Level 5，动态对比度计算
zoom 属性非标准虽成Baseline新可用，但非W3C标准规范

12. @function 自定义函数

css

@function --calc-rem(--px) {
  result: calc(var(--px) / 16 * 1rem);
}

.box {
  padding: --calc-rem(32); /* 输出 2rem */
}
/* Stage: ED【编辑草案，实验性，可能变化】 （附加说明：CSS Functions规范草案，提案阶段）*/

13. corner-shape 和 shape() 函数

css

.squircle {
  corner-shape: superellipse; /* 圆角矩形变种 */
  border-radius: 2rem;
}

.custom-shape {
  clip-path: shape("M 0 0 L 100 0 L 50 100 Z");
}
/* Stage: ED【编辑草案，实验性，可能变化】 （附加说明：CSS Shapes Level 2，仍在设计阶段）*/

14. text-wrap: balance 和 pretty

css

h2 {
  text-wrap: balance; /* 平衡行长度，避免标题换行太丑 */
}
p {
  text-wrap: pretty; /* 避免段落末尾孤行 */
}
/* Stage: CR【候选推荐标准，需要两个独立实现，基本稳定】  （附加说明：CSS Text Level 4，跨浏览器支持良好）*/

15. field-sizing 属性

css

textarea {
  field-sizing: content; /* 根据内容自动调整高度 */
  min-height: 3em;
}
/* Stage: WD【工作草案，设计阶段，需关注浏览器支持】 （附加说明：CSS Basic User Interface Level 4，Chrome已支持）*/

16. 高级 attr() 函数

html

<div data-color="red" data-size="50">内容</div>

css

div {
  background-color: attr(data-color type(<color>), blue);
  width: attr(data-size type(<length>), 100px);
}
/* Stage: WD【工作草案，设计阶段，需关注浏览器支持】 （附加说明：CSS Values and Units Level 5，Interop 2026重点之一）*/

17. contrast-color() 函数

css

.button {
  background: #007bff;
  color: contrast-color(background); /* 自动选择白色或黑色 */
}
/* Stage: WD【工作草案，设计阶段，需关注浏览器支持】 （附加说明：CSS Color Level 5，动态对比度计算）*/

18. zoom 属性

css

.zoomable {
  zoom: 1.5; /* 缩放元素，影响布局（类似放大镜） */
}
/* Stage: 非标准【未纳入W3C规范，但浏览器已实现】 （附加说明：虽成Baseline新可用，但非W3C标准规范）*/

📊 数据查询与动画

  • 容器查询 (@container) ：不再局限于视口，而是根据父容器的尺寸或样式来改变子元素的样式，实现真正的组件化响应式设计。
  • 样式查询 (@container style()) ：容器查询的进阶版，可以根据父容器的CSS属性（如 font-style: italic）或自定义变量来应用样式。
  • light-dark() 函数：一行代码实现深色/浅色模式的样式切换，跟随系统主题。
  • linear() 缓动函数：通过定义多点线段，创建出远超 cubic-bezier() 复杂度的弹跳等特效)。
  • 视图过渡 (View Transitions) ：提供了页面状态变化时的平滑过渡效果，支持同页面和跨文档（多页应用）过渡。
  • 嵌套视图过渡组：在视图过渡中保持元素树状结构，维持 overflow: clip 或 3D 变换等效果。

  • W3C流程规范阶段

特性规范阶段简要说明
容器查询 (@container)CRCSS Containment Level 3，Interop推动后稳定
样式查询 (@container style())WDCSS Containment Level 3扩展，支持度逐步提升
light-dark() 函数CRCSS Color Level 5，跨浏览器支持
linear() 缓动函数CRCSS Easing Level 2，可创建复杂缓动曲线
视图过渡 (View Transitions)WDCSS View Transitions Level 1，Interop 2026重点
嵌套视图过渡组WDCSS View Transitions Level 2，演进中

19. 容器查询

css

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex; /* 宽容器时变为水平布局 */
  }
}
/* Stage: CR【候选推荐标准，需要两个独立实现，基本稳定】 （附加说明：CSS Containment Level 3，Interop推动后稳定）*/

20. 样式查询

css

@container style(--highlight: true) {
  .item {
    background: yellow;
  }
}
/* Stage: WD【工作草案，设计阶段，需关注浏览器支持】 （附加说明：CSS Containment Level 3扩展，支持度逐步提升）*/

21. light-dark() 函数

css

:root {
  color-scheme: light dark;
}
body {
  background: light-dark(white, black);
  color: light-dark(black, white);
}
/* Stage: CR【候选推荐标准，需要两个独立实现，基本稳定】 （附加说明：CSS Color Level 5，跨浏览器支持）*/

22. linear() 缓动函数

css

.bounce {
  transition: transform 0.5s linear(0, 0.2, 0.8, 1); /* 自定义缓动曲线 */
}
/* Stage: CR【候选推荐标准，需要两个独立实现，基本稳定】 （附加说明：CSS Easing Level 2，可创建复杂缓动曲线）*/

23. 视图过渡

html

<main>
  <div id="detail" style="view-transition-name: detail;">...</div>
</main>

js

// 配合JS触发过渡
document.startViewTransition(() => updateDOM());

css

/* 配合视图过渡的样式可自定义 */
::view-transition-old(detail) { ... }
::view-transition-new(detail) { ... }
/* Stage: WD【工作草案，设计阶段，需关注浏览器支持】 （附加说明：CSS View Transitions Level 1，Interop 2026重点）*/

24. 嵌套视图过渡组

css

.parent {
  view-transition-group: parent;
}
.child {
  view-transition-group: child;
  view-transition-group-parent: parent; /* 嵌套关系 */
}
/* Stage: WD【工作草案，设计阶段，需关注浏览器支持】 （附加说明：CSS View Transitions Level 2，演进中）*/

📦 组件与表单

  • 可自定义的 <select> 元素：通过 appearance: base-select 彻底解锁 <select> 元素的样式定制，包括按钮和下拉框，支持富内容选项。
  • Popover 和 Invokers API：通过HTML属性（如 popover）声明式地创建弹窗、提示框，并配合 command 等属性进行控制。
  • 滚动标记和按钮：通过 ::scroll-marker 和 ::scroll-button() 伪元素，无需JS即可创建轮播图的导航点和滚动按钮。
  • 媒体伪类：:playing、:paused、:buffering 等伪类，让开发者可以基于 <audio> 或 <video> 的播放状态来设置样式。
  • 自定义高亮伪类：除了 ::selection，现在还有 ::search-text（查找匹配）、::target-text（文本片段）、::spelling-error 等伪类用于高亮特定状态的文本。

  • W3C流程规范阶段

特性规范阶段简要说明
可自定义 <select>WDCSS Basic User Interface Level 4，Chrome实验性支持
Popover APICRHTML Living Standard，Interop项目已覆盖
滚动标记和按钮WDCSS Overflow Level 4，实验阶段
媒体伪类CRSelectors Level 4，播放状态伪类
自定义高亮伪类CRCSS Pseudo-Elements Level 4，文本高亮增强

25. 可自定义的 <select>

css

select {
  appearance: base-select; /* 解锁完全样式定制 */
}
option::before {
  content: "✓";
  display: none;
}
option:checked::before {
  display: inline;
}
/* Stage: WD 【工作草案，设计阶段，需关注浏览器支持】（附加说明：CSS Basic User Interface Level 4，Chrome实验性支持）*/

26. Popover 和 Invokers API

html

<button popovertarget="my-popover">打开弹窗</button>
<div id="my-popover" popover>我是弹窗内容</div>

css

[popover] {
  margin: auto;
  padding: 1rem;
  border-radius: 8px;
}
/* Stage: CR【候选推荐标准，需要两个独立实现，基本稳定】 （附加说明：HTML Living Standard，Interop项目已覆盖）*/

27. 滚动标记和按钮

css

.scroll-container {
  scroll-marker-group: ::scroll-markers; /* 生成导航点 */
}
::scroll-button(left) {
  content: "←";
}
/* Stage: WD【工作草案，设计阶段，需关注浏览器支持】 （附加说明：CSS Overflow Level 4，实验阶段）*/

28. 媒体伪类

css

video:playing {
  opacity: 1;
}
video:paused {
  opacity: 0.7;
}
/* Stage: CR【候选推荐标准，需要两个独立实现，基本稳定】 （附加说明：Selectors Level 4，播放状态伪类）*/

29. 自定义高亮伪类

css

::search-text {
  background-color: yellow;
  color: black;
}
::spelling-error {
  text-decoration: wavy red underline;
}
/* Stage: CR 【候选推荐标准，需要两个独立实现，基本稳定】（附加说明：CSS Pseudo-Elements Level 4，文本高亮增强）*/

写到最后

关于这些特性属于哪个阶段（W3C Process），根据最新的CSS快照和浏览器实现情况，它们大致可以分为两类：

  • 稳定成熟（CR/REC阶段，可生产使用） ：

    • 布局类：CSS 嵌套、Subgrid、 :has()  已被纳入CSS官方定义，Baseline兼容性良好。
    • 基础增强： @starting-style（Baseline 2024新推出）、text-wrap: balance（跨浏览器支持）、linear() 缓动。
    • 视觉与响应：light-dark() 、容器查询（尺寸查询全支持）。

  • 实验与演进（WD/ED阶段，可超前学习） ：

    • Interop 2026 重点聚焦：锚点定位、高级 attr() 、滚动驱动动画、shape() 函数、视图过渡、 @scope 等是今年各大浏览器厂商互操作性攻坚的重点。
    • Chrome 领先实现：if() 、 @function、可自定义 <select> 、field-sizing、状态查询等目前在Chrome中可用，但跨浏览器支持尚在途中。

对于实战项目，建议的策略是：

  1. 大胆使用：CSS 嵌套、:has()、Subgrid、容器查询。它们能立刻改善你的开发体验和代码质量，且兼容性已足够好。
  2. 结合场景：如果你的项目需要大量弹窗，可以开始尝试锚点定位（配合Popover API），同时做好降级或polyfill。
  3. 保持关注：滚动驱动动画、if()、@function 代表了CSS逻辑化的未来，密切关注浏览器兼容性趋势，一旦时机成熟便可大规模应用。

如果这篇文章让你对 CSS 刮目相看，点个赞，收藏起来，让更多朋友看到——CSS 真的起飞了。

#CSS新特效 #前端 #Web开发 #设计 #Interop2026 #干货

avatar
文章
阅读
粉丝