谷歌发布十项 Web 新特性！

在前几天举行的 Google I/O 2025 大会上，Chrome 团队带来了很多新的 Web 平台功能。这些功能可以帮助开发者更高效，提升用户体验。

CSS 轻松实现轮播图

Chrome 135 加入了新的 CSS 语法：::scroll-button() 和 ::scroll-marker()。开发者现在只需要用 HTML 和 CSS 就能做出互动轮播图，不用再用 JavaScript。

• • ::scroll-marker: 给每一页加分页指示器，并可以设置样式。
• • ::scroll-button(start/end): 左右滚动按钮是系统提供的，样式一致。
• • scroll-snap-type, scroll-snap-align: 可以让每次滚动对准一页。

图片社交网站 Pinterest 已经用了这个新方法。他们把原来 2000 行的 JS 代码变成了 200 行 CSS，维护起来简单多了。

例子：

<div class="carousel" tabindex="0">
  <div class="carousel-track">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
    <div class="slide">Slide 4</div>
  </div>
</div>

.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
scrollbar-gutter: stable;
scroll-padding-inline: 1rem;
block-size: 250px;
border: 1px solid #ccc;
position: relative;
padding-block: 1rem;
accent-color: #007aff; /* 控制滚动按钮和标记颜色 */
}

.carousel-track {
display: flex;
gap: 1rem;
inline-size: max-content;
}

.slide {
inline-size: 300px;
flex: none;
scroll-snap-align: start;
background: #f5f5f5;
border-radius: 1rem;
padding: 2rem;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 04px12pxrgba(0, 0, 0, 0.1);
}

/* 样式化分页标记 */
.carousel::scroll-marker {
block-size: 6px;
inline-size: 24px;
background: #ccc;
border-radius: 3px;
margin-inline: 4px;
}

.carousel::scroll-marker(active) {
background: #007aff;
}

/* 样式化左右滚动按钮 */
.carousel::scroll-button(start) {
background: #fff;
color: #007aff;
border: 1px solid #007aff;
border-radius: 50%;
padding: 0.5rem;
}

.carousel::scroll-button(end) {
background: #fff;
color: #007aff;
border: 1px solid #007aff;
border-radius: 50%;
padding: 0.5rem;
}

声明式弹出窗口：Interest Invoker API

Interest Invoker API 是 Chrome 中引入的一项新功能，用于声明式地处理轻量用户交互，用于触发弹出 UI 元素（如弹出框、工具提示、悬浮卡片等），而无需 JavaScript。

以前要做弹出窗口，开发者需要写很多 JavaScript 监听事件，控制显示隐藏。这种做法灵活但麻烦，容易出错，也不方便做无障碍支持。现在用 Interest Invoker API，只要用户悬停、点击或聚焦，就能自动显示对应内容（比如 <div popover>）。

**例子：**搭配新的 popover 属性，浏览器将自动管理弹出状态的显示与隐藏。

<!-- Interest 区域：当鼠标悬停或聚焦时，触发目标显示 -->
<button interest="details">查看详情</button>

<!-- 被触发的目标：一个可弹出的悬浮卡片 -->
<div popover id="details">
  微信公众号：前端充电宝
</div>

内置 AI API：引入 Gemini Nano 和多模态 Prompt API

Google 在 Chrome 中引入了 端侧（on-device）AI 能力，通过一组内置 API 提供给 Web 开发者。这些 API 使用 Gemini Nano —— Google 的轻量版生成式 AI 模型，运行在本地设备上，不依赖云端服务器。

Gemini Nano 是 Google Gemini 模型的轻量版本，优化运行在手机和浏览器端，具备较强的文本和图像处理能力，适合离线使用。

从 Chrome 138 起，Summarizer API、Language Detector API 和 Translator API 已稳定发布，Prompt API 也可以用于 Chrome 扩展。此外，Writer API 和 Rewriter API 也提供了原始试用。这些 API 使网页或扩展程序可以直接调用 AI 功能，如文本摘要、语言识别、翻译，以及多模态内容处理 —— 全部不需要联网或服务器部署。

• • Summarizer API（摘要 API）：从提供的文本中自动生成简洁摘要。

const summary = await summarize("这是一段很长的文本...");
console.log(summary);

• • Language Detector API（语言检测 API）：自动识别输入文本的语言。

const lang = await detectLanguage("Bonjour tout le monde");
console.log(lang); // 输出 "fr"

• • Translator API（翻译 API）：本地将文本翻译为目标语言。

const translated = await translate("你好", "en");
console.log(translated); // 输出 "Hello"

• • **Prompt API（多模态）：**调用 Gemini Nano 对文本、图像等多种输入进行理解、生成或问答。

const result = await promptAI({
  input: {
    text: "总结这张图的内容",
    image: imageBlob
  },
  context: "用户想快速理解图表信息"
});
console.log(result);

• • Writer API：允许开发者向模型提供提示（prompt），由 Gemini Nano 在本地生成新的文本内容。

const output = await writer.generate({
  prompt: "写一段介绍人工智能的简短段落",
  context: "科普文章风格"
});
console.log(output.text);

• • Rewriter API：用于对现有文本进行重写、润色、语气调整或简化，也是运行在本地的 Gemini Nano 能力。

const rewritten = await rewriter.rewrite({
  input: "本系统旨在优化资源调度与任务分配",
  tone: "更口语化"
});
console.log(rewritten.text);
// 输出：我们这个系统主要是为了更好地分配任务和资源。

混合式 AI 解决方案

Chrome 团队与 Firebase、Gemini Developer API 的合作，为开发者带来了一个 “混合式 AI 架构”，能在移动端和桌面端构建响应迅速、覆盖面广、智能化的 Web 应用。这些应用尽可能使用客户端 AI，并无缝扩展到服务器端 AI，以覆盖所有设备和浏览器。

这个新模式意味着：

• • 优先在本地运行 —— 快速、保护隐私
• • 如果不支持，就自动用云端 AI —— 保证效果一致

AI 驱动的 DevTools

Chrome 现在在 DevTools 中集成了由 Gemini 驱动的 AI 助手，帮助开发者快速理解、定位并解决常见前端开发中的问题。

借助这项功能，你可以直接在 DevTools 面板内与 AI 进行对话，让它：

• • 分析当前页面中的问题（如样式错乱、性能瓶颈）
• • 指导调试步骤
• • 自动应用修复建议
• • 引导你找到相关源码

DevTools 全新 Performance 面板

Chrome DevTools 的 Performance 面板 已进行重大升级，不再只是开发者录制的本地性能轨迹分析工具，而是：一个集成了 真实用户数据（RUM）+ Lighthouse 分析 + Gemini AI 助理 的全新性能调试中心。

它让你可以更直观、智能、高效地识别性能瓶颈，并获得优化建议 —— 全部 无需离开 DevTools 工作流。

Baseline 支持集成进主流开发工具

Baseline 是 Google Chrome 团队发起的一个开放标准，旨在帮助开发者快速判断某个 Web 特性是否在主流浏览器中广泛可用。

在熟悉的 Web 开发工具中，将能够清晰地了解各大浏览器对 Web 特性的支持情况：

• • IDE（集成开发环境）：VS Code 现在可以在编写代码的过程中直接显示特性的 Baseline 状态，未来还将支持 JetBrains 的 WebStorm 以及基于 VS Code 的 IDE，例如 Firebase Studio、Windsurf、GitHub Codespaces 等。
• • Linter（代码检查工具）：CSS 和 HTML 的 Linter 可以在你使用超出 Baseline 目标范围的新特性时主动发出警告。ESLint（针对 CSS）、HTML ESLint 和 Stylelint 已支持 Baseline。
• • 分析工具：RUMvision 将 Baseline 数据与真实用户指标相结合，让你能够为受众策略性地选择最优的 Baseline 版本。Google Analytics 用户可以将自己的数据上传到 Google Analytics Baseline Checker，以获得 Baseline 建议。
• • 编译工具：使用 browserslist-config-baseline，可以将 Baseline 目标集成到诸如 Babel 和 PostCSS 的代码编译工具中。这样可以在源码中使用现代特性，并在生产构建中将其编译为向后兼容的代码。

全面掌握 Web 特性支持情况

Google 推出的 Web Platform Dashboard（Web 平台仪表板）现已完成了 100% 的 Web 特性数据集映射。

https://webstatus.dev/

这意味着，开发者可以：

• • 一站式查看所有 Web 特性的状态
• • 对比其在各大浏览器中的 Baseline 支持情况
• • 了解每个特性的 可用性与实际采用率

统一身份认证体验

Google 正在将 Android 上广受好评的 Credential Manager（凭据管理器）体验引入 Web 端的 Chrome 浏览器，旨在解决用户在登录网站时遇到的各种认证方式带来的复杂性，如：

• • 密码
• • 身份联合登录（如 Google/Facebook 登录）
• • Passkeys（无密码登录凭据）

主要功能：

• • 一致的凭据选择体验：用户点击“登录”时，Chrome 会自动弹出登录选项。包括密码、Passkeys，未来还会支持更多。
• • 体验更直观：不用区分登录方式，Chrome 会自动判断并显示合适的选项。
• • 开发者集成简单：开发者只需调用新的 Credential Manager API，而无需分别处理不同类型的登录方式。

更快迭代 Chrome 扩展程序

为了让开发者更快发布和更新扩展程序，Chrome 团队加了一个新功能：

现在可以取消正在审核的扩展提交，这样你可以马上修改并重新提交。

这个功能是在原来的“撤回已发布版本”的基础上改进的。现在如果提交错了，也可以立刻修正。