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。如果使用者之後造訪的 B 網站也嵌入了網站 C,網站 C 就能存取在網站 A 上設定的 Cookie。如此一來,網站 C 就能編譯使用者在 A、B 和所有嵌入網站的瀏覽活動。

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

雖然跨網站追蹤是個問題,但其實有有效的跨網站 Cookie 需求,可透過 Cookie 分區的方式保護隱私權。

採用 CHIPS 後,當使用者造訪 A 網站,而網站 C 的內嵌內容設定了具有分區屬性的 Cookie,這個 Cookie 才會儲存在分割區中,只有網站 C 嵌入網站 A 時設定的 Cookie 才會儲存在分割區中。只有在頂層網站是 A 時,瀏覽器才會傳送這個 Cookie。

圖表顯示網站和分割儲存空間 (Cookie)。

當使用者造訪新的網站 (例如 B 網站) 時,網站 C 將無法收到嵌入網站 A 時所設定的 Cookie。

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

Popover API。

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

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

新的彈出式視窗屬性可讓任何元素自動顯示在頂層圖層中。也就是說,您不必費心處理開發人員的位置、堆疊元素、焦點或鍵盤互動等問題。

這與 <dialog> 元素類似,但有幾項重要差異,包括淺色關閉行為、彈出式互動管理、事件支援,以及缺少「強制回應」模式。

詳情請參閱這篇文章

還有更多獎品等著您!

當然還有許多其他事物。

其他資訊

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

訂閱

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

Yosoy Adriana Jara. 一旦 Chrome 115 推出後,我就會在這裡告訴大家 Chrome 有哪些新功能!