Chrome 114 版新功能

以下是一些注意事項:

  • 您可以使用 CSS text-wrap: balance 改善文字版面配置。
  • 這裡列出按頂層網站 (CHIPS) 區分的 Cookie。
  • 有了 Popover API,您就能輕鬆打造彈出式視窗。
  • 還有許多其他功能。

我是 Adriana Jara。接下來,我們將深入探討 Chrome 114 中開發人員可用的最新功能。

text-wrap:balance

使用 text-wrap: balance 改善文字版面配置。下方動畫顯示這一行程式碼的差異。

試用示範

開發人員無法得知文字的最終大小、字型大小,甚至是文字語言。為了有效處理文字換行,您必須提供所有變數。由於瀏覽器確實瞭解所有因素,因此您可以使用 text-wrap:balance 要求瀏覽器找出最佳的平衡行斷字解決方案。

以下同時顯示上述兩個範例,其中一個標示為不平衡,另一個標示為平衡。

平衡的文字區塊對讀者來說更賞心悅目。這麼做能更有效地吸引註意力,整體也更容易閱讀。

text-wrap: balance 的主要用途應是平衡標題,文字平衡會影響效能,因此為了降低成本,最多只能顯示四行文字。

請參閱這篇文章,瞭解範例和更多詳細資訊,以改善文字版面配置。

CHIPS:具有獨立分區狀態的 Cookie。

CHIPS (具有獨立分區狀態的 Cookie):使用新的 Cookie 屬性 Partitioned,讓第三方 Cookie 可依頂層網站分區。

在 CHIPS 推出之前,當使用者造訪網站 A 時,嵌入式網站 C 可以在使用者的電腦上設定 Cookie。如果使用者接著造訪也嵌入網站 C 的網站 B,網站 C 就能存取在網站 A 上設定的 Cookie。這樣一來,網站 C 就能編譯使用者在 A、B 和所有嵌入的網站上的瀏覽活動。

這張圖表顯示採用未分區 Cookie 的網站和儲存空間。

雖然跨網站追蹤並不容易,但只要設定 Cookie 分區,就能在保護隱私權的情況下,達到有效的跨網站 Cookie 需求。

使用 CHIPS 時,當使用者造訪網站 A,且網站 C 的嵌入內容設定了含有「Partitioned」屬性的 Cookie,系統只會將網站 C 設定的 Cookie 儲存在分割的 JAR 檔案中,只有在頂層網站為 A 時,瀏覽器才會傳送該 Cookie。

圖表:顯示網站和分割儲存空間,以及其中的 Cookie。

當使用者造訪了網站 B (如網站 B) 時,網站 C 就不會收到網站 A 嵌入 C 時所設定的 Cookie。

如要進一步瞭解逐步淘汰第三方 Cookie 的程序,請參閱這篇文章

Popover API。

有了 Popover API,您就能更輕鬆地建構暫時性的使用者介面 (UI) 元素,並顯示在所有其他網頁應用程式 UI 上方。

包括使用者互動元素,例如動作選單、表單元素建議、內容挑選器和教學 UI。

新的彈出式視窗屬性可讓任何元素自動顯示在頂層。換言之,開發人員不必再煩惱如何定位、堆疊元素、焦點或鍵盤互動。

這類似於 <dialog> 元素,但有幾個重要的差異,包括輕觸關閉行為、彈出式視窗互動管理和事件支援,以及缺少「模態」模式。

詳情請參閱這篇文章

還有更多獎品等著您!

當然,還有許多其他功能。

  • 您可以使用 DevTools 搭配 DWARF 支援,在 WebAssembly 應用程式中暫停及偵錯 C 和 C++ 程式碼。
  • navigator.bluetooth.requestDevice() 中的 exclusionFilters 選項可讓網頁開發人員從瀏覽器挑選器中排除部分裝置。
  • 這項背景模糊功能是一項來源試用方案。

延伸閱讀

這只涵蓋部分重要亮點。請參閱下方連結,瞭解 Chrome 114 的其他變更。

訂閱

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

我是 Adriana Jara,Chrome 115 一推出,我就會在這裡告訴你 Chrome 有哪些新功能!