網路平台新手將於 8 月推出

瞭解 2024 年 8 月推出的穩定版和 Beta 版網頁瀏覽器中，有哪些有趣的功能。

Rachel Andrew

穩定版瀏覽器

2024 年 8 月，Firefox 129 和 Chrome 128 穩定版推出。本文將介紹網頁平台新增的功能。

Ruby 格式更新

HTML <ruby> 元素是強化文字呈現方式的強大工具，特別適用於東亞語言。這個元素可讓你在基本文字上方或旁邊顯示音標註解或其他補充資訊。自 Chrome 128 起，Ruby 註解可換行，您可以使用 ruby-align CSS 屬性為 Ruby 文字設定樣式。

詳情請參閱可換行 <ruby> 和 CSS ruby-align 屬性。

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

PointerEvent.deviceProperties (適用於多筆觸控書寫)

這項變更已在 Chrome 128 中推出，可透過安全可靠的方式識別與螢幕互動的個別筆 (指標)，為與數位板互動的每部裝置設定特定顏色或筆形。它會擴充 PointerEvent 介面，納入新的屬性 deviceProperties。這個屬性包含 uniqueId，代表工作階段持續性、文件隔離的唯一識別碼，可用於可靠地識別與網頁互動的個別筆。

Promise.try

在 Chrome 128 中，Promise.try 也能讓您更輕鬆地透過 Promise 處理錯誤。有一個模式，其中包含函式 f。這個函式可能會是異步，並傳回 Promise，也可能不會。如要使用 Promise 語意來處理這兩種情況中的錯誤，請將函式包裝在 Promise 中。這通常是透過 new Promise(resolve => resolve(f())) 完成。

Promise.try 是達成相同目標的更直接方式。您可以使用此方法啟動 Promise 鏈結，在 .catch 處理常式中擷取所有錯誤，而不需要同時處理同步和非同步例外狀況流程。

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

為進入效果加入動畫

Firefox 129 包含兩項 CSS 功能，可用於製作動畫效果，這些功能現已納入 Baseline Newly Available。

@starting-style 規則會在元素在頁面上算繪之前，定義元素的初始樣式。對於從 display: none 動畫顯示的元素而言，這項屬性是必要的，因為這些元素需要一個狀態來進行動畫顯示。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

輸入效果也需要動畫的離散屬性，也就是無法在值之間插補的屬性。您現在可以使用轉場快捷鍵中的 transition-behavior: allow-discrete 或 allow-discrete 值來達成這項目標。Firefox 129 也支援這項功能。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

詳情請參閱「現在已在基準模式中：為進入效果加入動畫」。

新增至 PerformanceResourceTiming

Firefox 129 新增了 PerformanceResourceTiming 介面的 contentType 和 responseStatus 屬性。這些值分別代表擷取的資源內容類型，以及擷取資源時傳回的 HTTP 回應狀態碼。

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

地理位置 toJSON() 方法

Firefox 129 也提供 GeolocationCoordinates.toJSON() 和 GeolocationPosition.toJSON()。

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

Firefox 129 現已支援 WebDriver BiDi。也就是說，您可以使用 Puppeteer 搭配 Chrome 或 Firefox 執行自動化動作。如要進一步瞭解相關資訊，請參閱「WebDriver BiDi 已準備好在 Firefox、Chrome 和 Puppeteer 中正式推出」和「Firefox 正式支援 Puppeteer」。

Beta 版瀏覽器

瀏覽器測試版可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前，您可以測試可能影響網站的新功能或移除項目。新的 Beta 版為 Firefox 130 和 Chrome 129。Safari 18 的 Beta 版仍在開發中。這些版本為平台帶來許多精彩功能。如需瞭解所有詳細資訊，請參閱版本資訊。以下列舉幾個重點。

Firefox 130 支援 <details> 元素群組 <details> 元素的 name 屬性，其中群組內一次只能開啟一個元素。這樣一來，您就能在不使用 JavaScript 的情況下，建立專屬的摺疊式選單。

Chrome 129 新增 CSS interpolate-size 屬性和 calc-size() 函式。

在可使用動畫的情況下，CSS interpolate-size 屬性可讓網頁選擇使用 CSS 內在大小調整關鍵字 (例如 auto、min-content 和 fit-content) 的動畫和轉場效果。

CSS calc-size() 函式是類似 calc() 的 CSS 函式，但也支援針對單一支援的大小設定關鍵字執行操作。目前支援的大小關鍵字為 auto、min-content、max-content 和 fit-content。

Chrome 129 也提供 Intl.DurationFormat，可用於格式化時間長度，例如「1 小時 40 分鐘 30 秒」(支援多個語言代碼)。