Chrome 115 新功能

Adriana Jara

以下是一些注意事項：

  • 使用 ScrollTimeline 和 ViewTimeline 可建立捲動式動畫，提升使用者體驗。
  • 圍欄頁框可與其他 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 需要新的嵌入內容方式。解決方案稱為圍欄框架。

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

Fenced Frame 是適用於嵌入內容的 HTML 元素，與 iframe 類似。與 iframe 不同的是，Fenced Frame 會限制與 iframe 的通訊內容，使得頁框可在不與嵌入內容共用的情況下，存取跨網站資料。

同樣地，嵌入情境中的任何第一方資料都無法與圍欄頁框共用。

功能 iframe fencedframe
嵌入內容 是 是
嵌入的內容可存取嵌入內容 DOM 是 否
嵌入結構定義可存取嵌入內容 DOM 是 否
可觀測的屬性，例如 name 是 否
網址 (http://example.com) 是 是 (視用途而定)
瀏覽器管理的不透明來源 (urn:uuid) 否 是
跨網站資料的存取權 否 是 (視用途而定)

舉例來說，假設 news.example (嵌入情境) 會在 Fenced 頁框中嵌入 shoes.example 的廣告。「news.example」無法竊取「shoes.example」廣告的資料，且「shoes.example」無法從「news.example」學習第一方資料。

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

請參閱下列文章，瞭解 Fenced Frames、Protected Audience API、共用儲存空間等說明文件

Topics API

過去，第三方 Cookie 和其他機制都用於追蹤使用者瀏覽網站的瀏覽行為，藉此推斷使用者的興趣主題。這些機制在 Privacy Sandbox 計畫中逐步淘汰。

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

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

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

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

如要瞭解主題分類和 Topics API 使用方法，請參閱「Privacy Sandbox 總覽」一文

還有更多獎品等著您！

當然還有許多其他事物。

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

其他資訊

以上內容僅涵蓋部分重點功能。如要瞭解 Chrome 115 的其他變更，請點選下方連結。

訂閱

如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

而 Yo soy Adriana Jara，而且 Chrome 116 推出後，我將立刻告訴大家 Chrome 有哪些新功能！