LabHub

博客

Web 平台 2025 完全攻略：Container Queries・:has()・CSS Nesting・Subgrid・Popover API・Anchor Positioning・WebGPU・WASI・Speculation Rules・Baseline 2024-2025 — Season 6 Ep 5

2026-04-15 · 15 分钟阅读 · #web-platform#container-queries#has-selector#css-nesting#css-subgrid#popover-api#anchor-positioning#webgpu#webassembly#wasi#speculation-rules#baseline#web-components

한국어English日本語中文

前言 · 平台变大，框架就变轻

2014-2020 年，我们之所以需要 React・Vue・Angular，是因为浏览器欠缺得太多。组件・状态管理・动画・路由・布局・交互，全都得用 JS 解决。

2024-2025 年不一样了。浏览器把大部分事情都做了。

我们依然在用 Next.js・React，但 2025 年的原则是 “能交给平台的就交给平台”。这篇文章就是那张地图。

第1章 · Baseline — 兼容性的新语言

什么是 Baseline？

2023-2024 年由 Web DX Community Group 建立的浏览器功能兼容性标签体系。用来回答“这个功能现在用安全吗？”。

三个级别

Baseline Newly available

Baseline Widely available

Limited availability

实战用法

为什么重要

第2章 · Container Queries — 响应式的革命

传统的问题

媒体查询 @media 以 整个视口 为基准。但同一个卡片组件，有时放在侧边栏、有时放在主区域，尺寸就不一样。哪怕视口相同。

解决：@container

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

@container grid (min-width: 600px) {
  .card { display: flex; }
}

现在卡片布局由卡片网格 自身的宽度 决定。

单位

2025 年的支持情况

使用模式

(1) 自身响应式的组件

(2) Style Queries（2024 Chrome/Edge）

(3) 视口 + 容器的组合

第3章 · :has() — 父选择器的到来

为什么是革命

CSS 一直是只能 向下 走的选择器。基于子元素来给父元素设样式必须靠 JS。:has() 拿掉了这个限制。

使用示例

(1) 按子元素有无来设置父元素样式

.card:has(img) { padding-top: 0; }
.form:has(input:invalid) { border: 1px solid red; }

(2) 按子元素状态设置整体样式

body:has(dialog[open]) { overflow: hidden; }

(3) 兄弟关系

label:has(+ input:focus) { color: blue; }

支持情况

实战影响

第4章 · 原生 CSS Nesting

此前

2023-2024 的原生 Nesting

.card {
  padding: 1rem;

  & .title {
    font-size: 1.5rem;
  }

  &:hover {
    background: #f0f0f0;

    & .title { color: #333; }
  }

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

注意

支持情况

意义

第5章 · CSS Subgrid

传统 Grid 的局限

Subgrid 的解法

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

.child {
  display: grid;
  grid-template-columns: subgrid; /* 继承父级网格 */
}

现在子 grid 会对齐到父 grid 的轨道上。

使用场景

支持情况

第6章 · Popover API・Dialog Element

传统模态框的问题

<dialog>（HTML5）

Popover API（2024-2025）

<button popovertarget="menu">菜单</button>
<div id="menu" popover>
  <ul>
    <li>项目 1</li>
    <li>项目 2</li>
  </ul>
</div>

支持情况

实战影响

第7章 · CSS Anchor Positioning

问题：浮动 UI

要把提示框・下拉菜单・弹出层相对某个元素 精确定位 很复杂。

解决：CSS Anchor Positioning（2024-）

<button id="btn">点击</button>
<div popover style="position-anchor: --btn;">
  提示框
</div>

#btn { anchor-name: --btn; }

[popover] {
  position: absolute;
  top: anchor(--btn bottom);
  left: anchor(--btn left);
}

支持情况（2025 年 4 月）

影响

第8章 · Web Components 在 2025 年的现状

三大基础

2024-2025 年的成熟

(1) Declarative Shadow DOM

(2) Form-associated Custom Elements

(3) CSS :state() 伪类

与框架的集成

现实评价

优点

局限

适合的用途

第9章 · WebGPU 的现状

WebGL 的局限

WebGPU（2023-）

2024-2025 的主要用途

(1) 在浏览器里跑 AI/ML

(2) 高性能图形

(3) 数据可视化

支持情况

局限

第10章 · File System Access API・其他本地能力

File System Access API

2024-2025 的主要新 API

(1) Clipboard API 的进化

(2) Web Share API

(3) Wake Lock API

(4) Screen Capture・WebCodecs

(5) Compression Streams

(6) Web Locks

局限

第11章 · WebAssembly・WASI 2025

WASM 的现状

WASI（WebAssembly System Interface）

在浏览器之外・在服务器上运行 WASM 的标准。

实战用法

(1) Serverless 边缘

(2) 插件系统

(3) 浏览器内的重计算

韩国的落地案例

第12章 · Speculation Rules API

目的

示例

<script type="speculationrules">
{
  "prerender": [
    { "source": "list",
      "urls": ["/next-page", "/likely-next"] }
  ],
  "prefetch": [
    { "source": "document",
      "where": { "href_matches": "/articles/*" } }
  ]
}
</script>

模式

2024-2025 的现况

实战用法

注意

第13章 · 实战 · “平台优先”检查清单

做新组件・新功能时，在框架和库之前 先确认这些。

检查项

判断顺序

  1. Web 平台里有没有内置能力？
  2. 是不是 Baseline Widely 支持？
  3. 没有的话，能不能用轻量库替代？
  4. 仍然需要的话，才用框架组件

第14章 · 下期预告 — Season 6 Ep 6：“性能・Core Web Vitals 2025”

把 Web 平台的能力用好，就是把 性能 用好。Ep 6 讲 Core Web Vitals 与性能全貌。

“性能不是功能。它是所有功能的前提。”

下篇文章再见。

结语 · 检查清单 12

  1. 你是按 Baseline Widely 这个标准来决定要不要用某个功能的吗？
  2. 需要响应式时，你会先考虑 Container Queries 吗？
  3. 基于父元素的样式，你会用 :has() 吗？
  4. 你的 CSS 是靠 Nesting 而不是构建工具在管理的吗？
  5. 复杂布局你会用 Subgrid 吗？
  6. 模态框・弹出层你是用 原生 API 实现的吗？
  7. 提示框・下拉菜单的位置你会用 Anchor Positioning 吗？
  8. 你会把 Web Components 用在 共享库 上吗？
  9. 你在探索 WebGPU 的机会（AI・可视化）吗？
  10. 需要本地能力（文件・系统）时，Platform API 是不是排在最前面？
  11. 你用 Speculation Rules 评估过预取/预渲染吗？
  12. “平台优先”检查清单，你会 对每个新组件 都套用吗？

“好的工程师知道平台能做什么。 伟大的工程师知道什么时候交给平台，什么时候自己动手。”

— Season 6 Ep 5, Fin.

评论

还没有评论。

登录后即可发表评论