2025 年 Google I/O 大會的 10 項更新:CSS 輪轉介面、AI 技術輔助的開發人員工具、具備多模態功能的提示 API 等

發布日期:2025 年 5 月 20 日

在 2025 年 Google I/O 大會,我們發表了多項新功能,可大幅提升您的工作效率,並協助您打造更強大、流暢且現代化的網站。

以下列出 10 項重要創新功能,讓您直接掌握頂尖技術,激發下一個專案的靈感。

1. 現在只要幾行 CSS 和 HTML 程式碼,就能輕鬆建構輪播效果

使用 CSS 建構美觀的輪播,在首次顯示內容時即可互動。Chrome 135 推出新的 CSS 基本元素,包括可設定樣式的片段、捲動標記元素和捲動按鈕,簡化輪轉介面建立程序,不必使用 JavaScript。運用熟悉的 CSS 概念,在短時間內建立豐富、互動式、流暢且更易於存取的輪轉介面。

Pinterest 是 CSS 輪播的早期採用者,他們發現程式碼減少了 90%,從大約 2,000 行 JavaScript 減少到大約 200 行 CSS。

2. 宣告式 Popover:推出新的 Interest Invoker API

實驗性 Interest Invoker API 可透過來源試用取得。這項功能可讓您在訪客對某個主題感興趣的一小段時間內,以宣告方式切換顯示彈出式視窗。再見,無法設定樣式的 [title] 屬性;你好,[interesttarget]!搭配錨點定位 APIPopover API,即可建立豐富、具備回應性及互動性的 UI 元素,例如工具提示或懸停資訊卡,無需使用 JavaScript。現代 CSS 帶來無限可能!

我們在開發人員主題演講中,運用輪轉介面、錨點定位 API、快顯視窗 API 和興趣呼叫器 API,打造出強大的電影院體驗。

3. 我們提供多種內建 AI API,採用頂尖的基礎模型,現在 Prompt API 也具備多模態功能

我們將持續推出內建 AI 的裝置,提供更完善的隱私權保護、更低的延遲時間和更低的成本,同時提供高品質的 AI 生成內容。內建 AI 採用專業模型和 Google 最高效的 Gemini Nano 模型,可支援各種裝置端工作。從 Chrome 138 開始,穩定版提供 Chrome 擴充功能的 Summarizer APILanguage Detector APITranslator APIPrompt API。此外,Writer API 和 Rewriter API 也提供來源試用。

新版 Proofreader API 和具備多模態功能的 Prompt API,都已在 Chrome Canary 中推出。

如需最新資訊,請加入搶先體驗計畫,共同開發新的內建 AI API,形塑網路上 AI 的未來。

Deloitte 工程平台實驗了 Prompt、Summarizer、Writer 和 Rewriter API,打造個人化新手指引體驗,並提供更快速的意見回饋方式,預計可加快 30% 的資訊擷取速度。[^1]
Adobe 在 Acrobat Chrome 擴充功能中實驗性地導入 Prompt API,提供多模態功能,讓使用者直接在 Chrome 中,從掃描的 PDF 立即生成摘要,並透過 Acrobat AI 助理更快驗證重要資訊。

4. 用戶端 AI 擴充功能可搭配 Firebase 和 Gemini Developer API,提供混合式 AI 解決方案

我們與 Firebase 和 Gemini Developer API 合作,現在您可以在行動裝置和桌機上建構 AI 驅動的網頁體驗。這些應用程式會盡可能使用用戶端 AI,並順暢擴展至伺服器端 AI,以便在所有裝置和瀏覽器上運作。即日起,Firebase AI Logic 可讓您透過 Gemini Developer API,順暢存取 Chrome 內建的提示 API (由 Gemini Nano 和伺服器端類似的小型模型提供支援)。

5. Chrome 開發人員工具中的 AI 輔助功能可支援偵錯工作流程,包括樣式和效能等

有了 AI 輔助工具,您就能與 Gemini 對話,排解「元素」面板中的樣式錯誤、解決「效能」面板中的效能問題、找出「網路」面板中的網路問題,以及在「來源」面板中找到來源檔案。此外,AI 輔助功能現在可以直接在「元素」面板中,將樣式相關變更套用至原始碼。

觀看最新影片,瞭解我們在 Chrome 開發人員工具中新增的最新功能。

6. Chrome 開發人員工具「效能」面板中的真實使用者資料、Lighthouse 深入分析和 AI 功能,可協助您瞭解及修正效能問題

現在您可以使用重新設計的「效能」面板,存取本機和實際使用者的核心指標資料,並請 Gemini 協助瞭解及修正效能問題。 「洞察」側欄會將 Lighthouse 洞察資訊帶入追蹤記錄,協助您更快進行偵錯,而且不必離開工作流程或中斷工作。

7. 您現在可以在熟悉的工具中使用 Baseline 功能,例如 VS Code、ESLint 等

整合 Baseline 後,您就能在網頁開發工作流程中獲得更高的準確度和信心。您可以在熟悉的網頁開發工具中,清楚瞭解主要瀏覽器支援的網頁功能:

  • IDE:VSCode 現在會在您建構功能時顯示 Baseline 狀態,並即將支援 JetBrains 的 WebStorm,以及以 VS Code 為基礎的 IDE,包括 Firebase Studio、Windsurf 和 GitHub Codespaces 等。
  • Lint 工具:當您使用的功能比 Baseline 目標新時,CSS 和 HTML Lint 工具會主動發出警告。CSS 的 ESLintHTML ESLintStylelint 均支援 Baseline。
  • Analytics:RUMvision 會結合基準資料和實際使用者指標,讓您策略性地為目標對象選擇最佳基準版本。Google Analytics 使用者可以將資料上傳至 Google Analytics 基準檢查工具,取得基準建議。
  • 編譯器:使用 browserslist-config-baseline 將 Baseline 目標插入 Babel 和 PostCSS 等程式碼編譯工具,以便在原始碼中使用新式功能,並在正式版建構作業中編譯這些功能。

8. 透過 Web Platform 資訊主頁,全面瞭解網頁功能支援情形

去年,我們宣布推出 Web Platform Dashboard,方便您探索網頁功能資料,以一組功能的形式呈現整個網頁平台。網頁功能資料集現在已 100% 對應,您將首次能查看每個瀏覽器上所有功能的 Baseline 狀態 (從 AVIF 到檢視區塊轉換),包括可用性和採用情況。掌握最新資訊,放心建構!

9. 開發人員試用版:透過 Credential Manager 簡化登入程序

我們瞭解多種驗證方法 (包括密碼、身分聯合驗證和密碼金鑰) 可能會為網站使用者帶來不便。我們的目標是為使用者提供統一且輕鬆的登入體驗,因此我們將 Android 憑證管理工具的直覺式體驗帶到 Chrome。不久後,使用者點選「登入」時,Chrome 就會顯示可登入這個網站的憑證,例如 Google 密碼管理工具中的密碼金鑰和密碼,讓登入程序更加順暢。我們也計畫在這項服務中加入身分同盟。網頁版憑證管理工具現已開放開發人員試用,敬請期待今年稍晚的更多更新。

10. 可取消送審,加快 Chrome 擴充功能疊代速度

提交 Chrome 擴充功能時,您應該會感到輕鬆、安心又期待! 不過,我們發現一個痛點,就是無法快速修正待處理提交內容中的錯誤。今年稍早,我們推出了取消待處理提交內容的功能,並以還原先前發布版本的功能為基礎,讓您快速進行變更並重新提交。

如需最新資訊,請前往 developer.chrome.comweb.dev,進一步瞭解我們如何讓強大的網路變得更加容易使用。歡迎在 XYouTubeLinkedIn 上追蹤我們。我們下次 I/O 大會再見!


「德勤」是指 Deloitte Touche Tohmatsu Limited (英國私人擔保有限公司「DTTL」)、旗下成員公司網路,以及相關實體。DTTL 及旗下各公司依法均為各自獨立的實體。DTTL (也稱為「Deloitte Global」) 不會向客戶提供服務。在美國,「Deloitte」是指 DTTL 的一或多個美國成員公司、在美國以「Deloitte」名稱營運的相關實體,以及上述實體的各自關係企業。根據公共會計的規則和法規,某些服務可能不適用於認證客戶。如要進一步瞭解我們的全球成員公司網路,請參閱 www.deloitte.com/about。