Chrome 115 新功能

Adriana Jara

以下是一些注意事項：

  • 使用 ScrollTimeline 和 ViewTimeline 建立捲動驅動動畫，提升使用者體驗。
  • Fenced Frames 可搭配其他 Privacy Sandbox API 使用，嵌入相關內容，同時避免不必要的內容分享。
  • 透過 Topics API，瀏覽器可在保護隱私權的同時，與第三方分享使用者興趣相關資訊。
  • 此外，您還有更多空間。

我是 Adriana Jara。讓我們一起來看看 Chrome 115 為開發人員帶來哪些新功能。

捲動驅動動畫

捲動驅動動畫是網路上常見的使用者體驗模式。捲動驅動動畫會連結至捲動容器的捲動位置。這表示當您向上或向下捲動時，連結動畫會在直接回應中向前或向後播放。

以下範例說明瞭一些用途。舉例來說，您可以建立會隨著捲動移動的閱讀指標：

文件頂端的閱讀指標，由捲動操作驅動。

捲動驅動動畫也可以建立元素，讓元素在進入畫面時淡入：

本頁中的圖片在進入瀏覽狀態時淡出。

根據預設，附加至元素的動畫會在文件時間軸上執行。當網頁載入時，其原始時間會從 0 開始，並隨著時鐘時間的推移而開始前進。這是預設動畫時間軸，截至目前為止，您只能使用這種時間軸。

捲動驅動動畫規格定義了兩種可用時間軸：

  • 捲動進度時間軸：與捲動容器沿著特定軸線的捲動位置相關聯的時間軸。
  • 檢視進度時間軸：與特定元素在其捲動容器中的相對位置相關聯的時間軸。

以下程式碼範例使用匿名捲動進度時間軸，建立固定在檢視區頂端的閱讀進度指標。

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

如需所有詳細資訊和更多範例，請參閱「捲動驅動程式動畫」。

圍欄頁框

Privacy Sandbox 計畫旨在打造可保護使用者線上隱私的技術，並提供工具協助開發人員壯大數位事業。

許多提案的目標都是在不使用第三方 Cookie 或其他追蹤機制的情況下，滿足跨網站用途。例如：

為維護隱私權，部分 API 需要採用新的嵌入內容方式。這個解決方案稱為「圍欄式畫面」。

隔離框架可與其他 Privacy Sandbox 提案搭配使用，在單一頁面中顯示來自不同儲存空間分區的文件。

Fenced Frame 是用於嵌入內容的 HTML 元素，類似於 iframe。圍欄框架與 iframe 不同，會限制與嵌入內容通訊的通訊，讓框架存取跨網站資料，而不必與嵌入內容分享資料。

同樣地，嵌入內容中的任何第一方資料都無法與受限影格共用。

功能 iframe fencedframe
嵌入內容 是 是
嵌入的內容可存取嵌入內容的 DOM 是 否
嵌入內容的上下文可存取嵌入內容的 DOM 是 否
可觀察的屬性，例如 name 是 否
網址 (http://example.com 個) 是 是 (視用途而定)
由瀏覽器管理的非公開來源 (urn:uuid) 否 是
存取跨網站資料 否 是 (視用途而定)

舉例來說，假設 news.example (嵌入內容) 在受限框架中嵌入 shoes.example 的廣告。news.example 無法竊取「shoes.example」廣告的資料，而 shoes.example 也無法得知「news.example」的第一方資料。

儲存空間分區之前與之後的狀態比較。

請參閱這些文章，瞭解 Fenced Frames、Protected Audience API、Shared Storage 等說明文件

Topics API

過去，我們曾使用第三方 Cookie 和其他機制，追蹤使用者在不同網站上的瀏覽行為，推測他們感興趣的主題。這些機制將逐步淘汰，以符合 Privacy Sandbox 計畫的目標。

Topics API 可讓瀏覽器在保護隱私權的同時，與第三方分享使用者興趣相關資訊。

Topics API 不需追蹤使用者造訪網站，就能按照興趣顯示廣告 (IBA)。瀏覽器會根據使用者的瀏覽活動，觀察並記錄使用者感興趣的主題。這項資訊會記錄在使用者裝置上。

舉例來說，如果使用者造訪 knitting.example 網站，API 可能會建議主題 "Fiber & Textile Arts"。

Topics 是一項信號，可協助廣告技術平台選擇相關廣告。與第三方 Cookie 不同，這類資訊在分享時不會揭露使用者本身或使用者瀏覽活動的進一步資訊。

請參閱Privacy Sandbox 總覽，進一步瞭解主題分類法和使用 Topics API 的所有細節

還有更多獎品等著您！

當然，還有許多其他功能

  • 主執行緒上的 WebAssembly.Module 大小上限增加至 8 MB
  • 除了舊版預先組合關鍵字外，CSS display 屬性現在也接受多個關鍵字做為值。
  • Compute Pressure API 提供原始試用版，可提供裝置硬體目前狀態的高層級資訊。

延伸閱讀

這份報告僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 115 的其他異動。

訂閱

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

Yo soy Adriana Jara 等 Chrome 116 推出後，我將立即與您分享 Chrome 的新功能