在前幾天舉行的 Google I/O 2025 大會上，Chrome 團隊帶來了很多新的 Web 平臺功能。這些功能可以幫助開發(fā)者更高效，提升用戶體驗。

CSS 輕松實現(xiàn)輪播圖

Chrome 135 加入了新的 CSS 語法：::scroll-button() 和 ::scroll-marker()。開發(fā)者現(xiàn)在只需要用 HTML 和 CSS 就能做出互動輪播圖，不用再用 JavaScript。

? ::scroll-marker: 給每一頁加分頁指示器，并可以設置樣式。

? ::scroll-button(start/end): 左右滾動按鈕是系統(tǒng)提供的，樣式一致。

? scroll-snap-type, scroll-snap-align: 可以讓每次滾動對準一頁。

圖片社交網(wǎng)站 Pinterest 已經(jīng)用了這個新方法。他們把原來 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 中引入的一項新功能，用于聲明式地處理輕量用戶交互，用于觸發(fā)彈出 UI 元素（如彈出框、工具提示、懸浮卡片等），而無需 JavaScript。

以前要做彈出窗口，開發(fā)者需要寫很多 JavaScript 監(jiān)聽事件，控制顯示隱藏。這種做法靈活但麻煩，容易出錯，也不方便做無障礙支持。現(xiàn)在用 Interest Invoker API，只要用戶懸停、點擊或聚焦，就能自動顯示對應內容（比如 <div popover>）。

**例子：**搭配新的 popover 屬性，瀏覽器將自動管理彈出狀態(tài)的顯示與隱藏。

<!-- Interest 區(qū)域：當鼠標懸停或聚焦時，觸發(fā)目標顯示 -->
<button interest="details">查看詳情</button>

<!-- 被觸發(fā)的目標：一個可彈出的懸浮卡片 -->
<div popover id="details">
  微信公眾號：前端充電寶
</div>

內置 AI API：引入 Gemini Nano 和多模態(tài) Prompt API

Google 在 Chrome 中引入了 端側（on-device）AI 能力，通過一組內置 API 提供給 Web 開發(fā)者。這些 API 使用 Gemini Nano —— Google 的輕量版生成式 AI 模型，運行在本地設備上，不依賴云端服務器。

Gemini Nano 是 Google Gemini 模型的輕量版本，優(yōu)化運行在手機和瀏覽器端，具備較強的文本和圖像處理能力，適合離線使用。

從 Chrome 138 起，Summarizer API、Language Detector API 和 Translator API 已穩(wěn)定發(fā)布，Prompt API 也可以用于 Chrome 擴展。此外，Writer API 和 Rewriter API 也提供了原始試用。這些 API 使網(wǎng)頁或擴展程序可以直接調用 AI 功能，如文本摘要、語言識別、翻譯，以及多模態(tài)內容處理 —— 全部不需要聯(lián)網(wǎng)或服務器部署。

? 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（多模態(tài)）：**調用 Gemini Nano 對文本、圖像等多種輸入進行理解、生成或問答。

const result = await promptAI({
  input: {
    text: "總結這張圖的內容",
    image: imageBlob
  },
  context: "用戶想快速理解圖表信息"
});
console.log(result);

? Writer API：允許開發(fā)者向模型提供提示（prompt），由 Gemini Nano 在本地生成新的文本內容。

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

? Rewriter API：用于對現(xiàn)有文本進行重寫、潤色、語氣調整或簡化，也是運行在本地的 Gemini Nano 能力。

const rewritten = await rewriter.rewrite({
  input: "本系統(tǒng)旨在優(yōu)化資源調度與任務分配",
  tone: "更口語化"
});
console.log(rewritten.text);
// 輸出：我們這個系統(tǒng)主要是為了更好地分配任務和資源。

混合式 AI 解決方案

Chrome 團隊與 Firebase、Gemini Developer API 的合作，為開發(fā)者帶來了一個 “混合式 AI 架構”，能在移動端和桌面端構建響應迅速、覆蓋面廣、智能化的 Web 應用。這些應用盡可能使用客戶端 AI，并無縫擴展到服務器端 AI，以覆蓋所有設備和瀏覽器。

這個新模式意味著：

? 優(yōu)先在本地運行 —— 快速、保護隱私

? 如果不支持，就自動用云端 AI —— 保證效果一致

AI 驅動的 DevTools

Chrome 現(xiàn)在在 DevTools 中集成了由 Gemini 驅動的 AI 助手，幫助開發(fā)者快速理解、定位并解決常見前端開發(fā)中的問題。

借助這項功能，你可以直接在 DevTools 面板內與 AI 進行對話，讓它：

? 分析當前頁面中的問題（如樣式錯亂、性能瓶頸）

? 指導調試步驟

? 自動應用修復建議

? 引導你找到相關源碼

圖片

DevTools 全新 Performance 面板

Chrome DevTools 的 Performance 面板 已進行重大升級，不再只是開發(fā)者錄制的本地性能軌跡分析工具，而是：一個集成了 真實用戶數(shù)據(jù)（RUM）+ Lighthouse 分析 + Gemini AI 助理 的全新性能調試中心。

它讓你可以更直觀、智能、高效地識別性能瓶頸，并獲得優(yōu)化建議 —— 全部 無需離開 DevTools 工作流。

圖片

Baseline 支持集成進主流開發(fā)工具

Baseline 是 Google Chrome 團隊發(fā)起的一個開放標準，旨在幫助開發(fā)者快速判斷某個 Web 特性是否在主流瀏覽器中廣泛可用。

在熟悉的 Web 開發(fā)工具中，將能夠清晰地了解各大瀏覽器對 Web 特性的支持情況：

? IDE（集成開發(fā)環(huán)境）：VS Code 現(xiàn)在可以在編寫代碼的過程中直接顯示特性的 Baseline 狀態(tài)，未來還將支持 JetBrains 的 WebStorm 以及基于 VS Code 的 IDE，例如 Firebase Studio、Windsurf、GitHub Codespaces 等。

? Linter（代碼檢查工具）：CSS 和 HTML 的 Linter 可以在你使用超出 Baseline 目標范圍的新特性時主動發(fā)出警告。ESLint（針對 CSS）、HTML ESLint 和 Stylelint 已支持 Baseline。

? 分析工具：RUMvision 將 Baseline 數(shù)據(jù)與真實用戶指標相結合，讓你能夠為受眾策略性地選擇最優(yōu)的 Baseline 版本。Google Analytics 用戶可以將自己的數(shù)據(jù)上傳到 Google Analytics Baseline Checker，以獲得 Baseline 建議。

? 編譯工具：使用 browserslist-config-baseline，可以將 Baseline 目標集成到諸如 Babel 和 PostCSS 的代碼編譯工具中。這樣可以在源碼中使用現(xiàn)代特性，并在生產(chǎn)構建中將其編譯為向后兼容的代碼。

全面掌握 Web 特性支持情況

Google 推出的 Web Platform Dashboard（Web 平臺儀表板）現(xiàn)已完成了 100% 的 Web 特性數(shù)據(jù)集映射。

https://webstatus.dev/

這意味著，開發(fā)者可以：

? 一站式查看所有 Web 特性的狀態(tài)

? 對比其在各大瀏覽器中的 Baseline 支持情況

? 了解每個特性的 可用性與實際采用率

圖片

統(tǒng)一身份認證體驗

Google 正在將 Android 上廣受好評的 Credential Manager（憑據(jù)管理器）體驗引入 Web 端的 Chrome 瀏覽器，旨在解決用戶在登錄網(wǎng)站時遇到的各種認證方式帶來的復雜性，如：

? 密碼

? 身份聯(lián)合登錄（如 Google/Facebook 登錄）

? Passkeys（無密碼登錄憑據(jù)）

主要功能：

? 一致的憑據(jù)選擇體驗：用戶點擊“登錄”時，Chrome 會自動彈出登錄選項。包括密碼、Passkeys，未來還會支持更多。

? 體驗更直觀：不用區(qū)分登錄方式，Chrome 會自動判斷并顯示合適的選項。

? 開發(fā)者集成簡單：開發(fā)者只需調用新的 Credential Manager API，而無需分別處理不同類型的登錄方式。

更快迭代 Chrome 擴展程序

為了讓開發(fā)者更快發(fā)布和更新擴展程序，Chrome 團隊加了一個新功能：

現(xiàn)在可以取消正在審核的擴展提交，這樣你可以馬上修改并重新提交。

這個功能是在原來的“撤回已發(fā)布版本”的基礎上改進的。現(xiàn)在如果提交錯了，也可以立刻修正。