· FRONTEND-2026-RADAR · 2026.05.05 · 12 MIN ·

CSS Wrapped 2025:22 个特性的年终总结(Una Kravets + Bramus + Rachel Andrew)

Una Kravets / Bramus / Rachel Andrew 三人合著的 CSS Wrapped 2025(2025-12-08),是 web.dev 全年 CSS 内容总结点。中文解读 + 译者点评。 · by fancyoung

AI · HERO seed:3620260505 Una Kravets / Bramus / Rachel Andrew 三人合著的 CSS Wrapped 2025(2025-12-08),是 web.dev 全年 CSS 内容总结点。中文解读 + 译者点评。

FIG.00 — cover · ai-generated · placeholder

影响力:Una Kravets + Bramus + Rachel Andrew 三人合著的 CSS Wrapped 2025(2025-12-08)是 web.dev 全年 CSS 内容的总结点。 干活密度:🟢 干活级 + 🟡 方法论级 必读读者:任何写 CSS 的工程师

🔥 影响力卡片

作者:Una Kravets(Chrome DevRel)+ Bramus(CSS WG)+ Rachel Andrew(Chrome DevRel,Layout 专家)
发布:2025-12-08(Chrome for Developers blog)
内容:2025 年 Chrome 落地的 22 个 CSS 特性总结
配套:web.dev 2025 主旋律 = “Less JavaScript, more CSS”

🎯 为什么必读

CSS 在 2025 年完成的特性数量是过去 5 年最多的一年。很多过去要写 JS 才能做的事情,现在用 CSS 一行就够。如果你不读这一篇,你写的 CSS 会比同行落后一个版本。

文章本身可读性极高,Una/Bramus/Rachel 三人是 web 平台最权威的 CSS 布道者;读完后再去读各自个人博客深挖具体特性。

一句话总结

2025 是 CSS “boss battle 终结年”:transition 到 height: auto 终于行了、tooltip 不需要 70KB 库了、跨页面动画原生支持了、CJK 标点也能自动收紧了。

💎 金句墙

★ “Less JavaScript, more CSS.” “更少 JavaScript,更多 CSS。” —— Web.dev 2025 全年主旋律。译者点评:这不是反 JS,是 web 平台权力下放 —— 过去用 JS 监听 scroll / 计算 layout / 操作 DOM 才能做的事(导航过渡、tooltip、入场动画、容器查询、滚动驱动动画),浏览器都做成了 CSS 原语。bundle 减小、性能提升、代码可读性提升,三赢

★ “One of the boss battles of CSS is almost won: transitioning to auto.” “CSS 一个 boss battle 即将赢 — transition 到 auto。” —— Frontend Masters 标题。译者点评:这是 CSS 历史上最 frustrating 的限制之一 —— height: 0 到 height: auto 一直无法 transition。Chrome 129 起 interpolate-size: allow-keywords + calc-size() 默认开启,这个限制结束了

📋 核心精读

1. View Transitions(L1 Baseline 2025-10,L2 Chrome 126+)

/* L2 — 跨页面 MPA 自动触发 */
@view-transition {
  navigation: auto;
  types: slide;
}

/* L1 — SPA */
document.startViewTransition(() => updateDOM());

🟢 译者点评:L1 全主流支持(Chrome 111+/FF 133+/Safari 18+);L2 cross-document 在 Chrome 126+/Safari 18.2+,FF 路上。React <ViewTransition> 组件依赖 L2 的 view-transition-types。

2. Anchor Positioning(Chrome 125+ 2024-05,Safari 26 / FF 147 2026-01-13 stable)

.anchor { anchor-name: --my-tooltip-anchor; }
.tooltip {
  position-anchor: --my-tooltip-anchor;
  position-area: top;
  margin-bottom: 8px;
}

🟢 译者点评:声明式 tooltip / popover / select 选项;滚动场景下性能极好(浏览器原生计算位置)。

3. `:has()`(>95% 全球覆盖,State of CSS 2025 评为最常用 + 最受欢迎)

/* 卡片包含图片时改变布局 */
.card:has(img) { display: grid; grid-template-columns: 1fr 1fr; }

/* 表单 invalid 时改变父容器 */
.field:has(input:invalid) { background: #fee; }

/* 纯 CSS 黑暗模式 toggle */
:root:has(input#dark-toggle:checked) { color-scheme: dark; }

🟢 译者点评:纯 CSS 实现状态依赖布局,无需 JS。这是 2024-2025 年 CSS 增长最大的单点能力。

4. `@starting-style` + `transition-behavior: allow-discrete` + `interpolate-size`

/* 入场动效 */
.modal {
  opacity: 1;
  transition: opacity 0.3s, display 0.3s allow-discrete;

  @starting-style {
    opacity: 0;
  }
}

/* transition height auto */
.accordion {
  interpolate-size: allow-keywords;
  height: 0;
  transition: height 0.3s;

  &.open {
    height: auto;
  }
}

🟢 译者点评:两个 boss battle 一起赢。@starting-style 让”挂载即过渡”成立;interpolate-size 让 keyword(auto / max-content / min-content)成为可 transition 值。组合起来可以做几乎所有动画,不需要 framer-motion。

5. Subgrid(Baseline Widely 2026-03-15,97%+)

.parent { display: grid; grid-template-columns: repeat(3, 1fr); }
.child {
  display: grid;
  grid-template-columns: subgrid;   /* 继承父网格 */
  grid-column: 1 / -1;
}

🟢 译者点评:复杂卡片对齐 / form 字段对齐的真正答案。过去你需要”手动对齐 grid line”,现在 subgrid 自动继承。

6. OKLCH / Relative Color Syntax(2025-08/09 全主流)

:root {
  --brand: oklch(0.72 0.17 250);

  /* 派生 lighter / darker / saturated / translucent */
  --brand-light: oklch(from var(--brand) calc(l + 0.1) c h);
  --brand-translucent: oklch(from var(--brand) l c h / 0.5);
}

🟢 译者点评:OKLCH 是设计师友好色彩空间(感知均匀);relative color syntax from <color> 让派生 token 不再需要 SCSS 函数。Tailwind v4 大量用 @property 实现动画过渡 token,底层全是 OKLCH。

<button popovertarget="my-popup">Open</button>
<div id="my-popup" popover>
  <p>Hello!</p>
</div>

🟢 译者点评:替代 70KB tooltip 库。light-dismiss、top layer、a11y 全部内置。<dialog popover> 还能做模态。

8. Container Queries(Baseline Widely 2025,知晓度 86%)

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

@container card (width > 400px) {
  .card-content { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Style queries(Chrome 111+,custom properties only) */
@container style(--theme: dark) {
  .card { background: #000; }
}

/* Scroll-state queries(Chrome 144+,实验) */
@container scroll-state(scrolled) {
  .header { backdrop-filter: blur(10px); }
}

🟢 译者点评:告别”组件级响应式靠 JS” 的时代;style queries 处于”实战出现”阶段(7%);scroll-state 仍实验。

9. `text-wrap: balance` / `pretty`

h1 { text-wrap: balance; }    /* 多行标题平衡(Baseline 2024)*/
p  { text-wrap: pretty; }     /* 段落避免单字成行(Chrome 117+/Safari 26+,FF 不支持)*/

🟢 译者点评:balance 仅在限定行数生效(Chromium ≤6 行,Firefox ≤10 行);pretty 在 Firefox 截至 2026 初仍未支持,需要降级。

10. CSS Nesting(Chrome 112+/FF 117+/Safari 16.5+,~95%)

.card {
  padding: 1rem;

  .title {
    font-size: 1.5rem;
  }

  &:hover {
    background: #eee;
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

🟢 译者点评:Sass 之前承担的几乎全部嵌套职责被原生覆盖。State of CSS 2024 报告 65% 受访者已在生产用原生 nesting,2025 进一步迁离 Sass。

11. Una Kravets 2025 个人推(配套深挖)

border-shape:非矩形 web 的未来(2026-02-19)— border-shape 实验性 CSS 几何
contrast-color() beyond black & white(2026-03-13)— 自定义调色板下的 contrast-color() 高级用法
Automated accessible text with contrast-color()(2026-03-12)— 浏览器自动选可读文字色
Directional CSS with scroll-state(scrolled)(2025-12-17)— 基于滚动方向的样式

12. Adam Argyle CascadiaJS 2025 “Oops, CSS got away from me”

https://cascadiajs.com/2025/talks/oops-css-got-away-from-me-send-halp

过去 5 年 CSS 综览最好的资源。Argyle 是 Shopify Staff Design Engineer,看遍了 web 平台层全部 CSS 特性,这个 talk 把它们串起来讲。

🟢 译者总评

现在就改的:Popover API 直接替代你的 tooltip 库;@starting-style 替代你的 framer-motion 入场动画;:has() 替代 1/3 的 JS event listener
必学速查:interpolate-size: allow-keywords(transition height auto)、text-wrap: balance(标题)、OKLCH + relative color(token 派生)
配套读:CJK 排版三件套 是 CSS Wrapped 内容的中文延伸;Una Kravets 个人推值得每个深挖
不要错过:Adam Argyle CascadiaJS 2025 talk 是 5 年 CSS 综览,看完再去看 CSS Wrapped 体验更完整
2026 即将进入主流:Subgrid Baseline 2026-03-15;Anchor Positioning Safari 26 / FF 147 stable;hanging-punctuation 在 Interop 2026 提议清单 — 这些值得提前预演

CSS Wrapped 2025:22 个特性的年终总结(Una Kravets + Bramus + Rachel Andrew)

🔥 影响力卡片

🎯 为什么必读

一句话总结

💎 金句墙

📋 核心精读

1. View Transitions(L1 Baseline 2025-10,L2 Chrome 126+)

2. Anchor Positioning(Chrome 125+ 2024-05,Safari 26 / FF 147 2026-01-13 stable)

3. `:has()`(>95% 全球覆盖,State of CSS 2025 评为最常用 + 最受欢迎)

4. `@starting-style` + `transition-behavior: allow-discrete` + `interpolate-size`

5. Subgrid(Baseline Widely 2026-03-15,97%+)

6. OKLCH / Relative Color Syntax(2025-08/09 全主流)

7. Popover API(2025-01,~93%)

8. Container Queries(Baseline Widely 2025,知晓度 86%)

9. `text-wrap: balance` / `pretty`

10. CSS Nesting(Chrome 112+/FF 117+/Safari 16.5+,~95%)

11. Una Kravets 2025 个人推(配套深挖)

12. Adam Argyle CascadiaJS 2025 “Oops, CSS got away from me”

🟢 译者总评

🔗 调研来源

CSS Wrapped 2025:22 个特性的年终总结(Una Kravets + Bramus + Rachel Andrew)

🔥 影响力卡片

🎯 为什么必读

一句话总结

💎 金句墙

📋 核心精读

1. View Transitions(L1 Baseline 2025-10,L2 Chrome 126+)

2. Anchor Positioning(Chrome 125+ 2024-05,Safari 26 / FF 147 2026-01-13 stable)

3. :has()(>95% 全球覆盖,State of CSS 2025 评为最常用 + 最受欢迎)

4. @starting-style + transition-behavior: allow-discrete + interpolate-size

5. Subgrid(Baseline Widely 2026-03-15,97%+)

6. OKLCH / Relative Color Syntax(2025-08/09 全主流)

7. Popover API(2025-01,~93%)

8. Container Queries(Baseline Widely 2025,知晓度 86%)

9. text-wrap: balance / pretty

10. CSS Nesting(Chrome 112+/FF 117+/Safari 16.5+,~95%)

11. Una Kravets 2025 个人推(配套深挖)

12. Adam Argyle CascadiaJS 2025 “Oops, CSS got away from me”

🟢 译者总评

🔗 调研来源

3. `:has()`(>95% 全球覆盖,State of CSS 2025 评为最常用 + 最受欢迎)

4. `@starting-style` + `transition-behavior: allow-discrete` + `interpolate-size`

9. `text-wrap: balance` / `pretty`