谷歌發(fā)布十項(xiàng) Web 新特性！

作者：CUGGZ 2025-05-23 07:31:08

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

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

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

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

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

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

? scroll-snap-type, scroll-snap-align: 可以讓每次滾動(dòng)對(duì)準(zhǔn)一頁。

圖片社交網(wǎng)站 Pinterest 已經(jīng)用了這個(gè)新方法。他們把原來 2000 行的 JS 代碼變成了 200 行 CSS，維護(hù)起來簡單多了。

例子：

<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; /* 控制滾動(dòng)按鈕和標(biāo)記顏色 */
}

.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);
}

/* 樣式化分頁標(biāo)記 */
.carousel::scroll-marker {
block-size: 6px;
inline-size: 24px;
background: #ccc;
border-radius: 3px;
margin-inline: 4px;
}

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

/* 樣式化左右滾動(dòng)按鈕 */
.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 中引入的一項(xiàng)新功能，用于聲明式地處理輕量用戶交互，用于觸發(fā)彈出 UI 元素（如彈出框、工具提示、懸浮卡片等），而無需 JavaScript。

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

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

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

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

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

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

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

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

? Summarizer API（摘要 API）：從提供的文本中自動(dòng)生成簡潔摘要。

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

? Language Detector API（語言檢測(cè) API）：自動(dòng)識(shí)別輸入文本的語言。

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

? Translator API（翻譯 API）：本地將文本翻譯為目標(biāo)語言。

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

? **Prompt API（多模態(tài)）：**調(diào)用 Gemini Nano 對(duì)文本、圖像等多種輸入進(jìn)行理解、生成或問答。

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

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

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

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

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

混合式 AI 解決方案

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

這個(gè)新模式意味著：

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

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

AI 驅(qū)動(dòng)的 DevTools

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

借助這項(xiàng)功能，你可以直接在 DevTools 面板內(nèi)與 AI 進(jìn)行對(duì)話，讓它：

? 分析當(dāng)前頁面中的問題（如樣式錯(cuò)亂、性能瓶頸）

? 指導(dǎo)調(diào)試步驟

? 自動(dòng)應(yīng)用修復(fù)建議

? 引導(dǎo)你找到相關(guān)源碼

圖片

DevTools 全新 Performance 面板

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

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

圖片

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

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

在熟悉的 Web 開發(fā)工具中，將能夠清晰地了解各大瀏覽器對(duì) 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 目標(biāo)范圍的新特性時(shí)主動(dòng)發(fā)出警告。ESLint（針對(duì) CSS）、HTML ESLint 和 Stylelint 已支持 Baseline。

? 分析工具：RUMvision 將 Baseline 數(shù)據(jù)與真實(shí)用戶指標(biāo)相結(jié)合，讓你能夠?yàn)槭鼙姴呗孕缘剡x擇最優(yōu)的 Baseline 版本。Google Analytics 用戶可以將自己的數(shù)據(jù)上傳到 Google Analytics Baseline Checker，以獲得 Baseline 建議。

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