6 月初次使用網路平台

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

Rachel Andrew

穩定版瀏覽器

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

JavaScript Set 方法

集合是任何程式語言中不可或缺的資料結構。您現在可以使用 JavaScript 內建的方法執行集合運算。下列設定方法現已在 Firefox 127 中提供，並成為基準新功能：

瀏覽器支援

  • Chrome：122。
  • Edge：122。
  • Firefox：127。
  • Safari：17。

資料來源

詳情請參閱「JavaScript Set 方法現已納入基準資料」。

Async Clipboard API

剪貼簿 API 現已在 Firefox 127 中完整支援。Firefox 現在支援 ClipboardItem 介面，以及剪貼簿介面的 read() 和 write() 方法。如要進一步瞭解剪貼簿 API，請參閱「解除封鎖剪貼簿存取權」。

瀏覽器支援

  • Chrome：76。
  • Edge：79。
  • Firefox：127。
  • Safari：13.1。

資料來源

CSS 漸層中的顏色插補

CSS 漸層已指定為接受 <color-interpolation-method>，Firefox 現已支援這項功能，因此可在所有主要引擎中互通。舉例來說，您現在可以使用 hsl 色彩系統和較長的插補指定 linear-gradient()。

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

瀏覽器支援

  • Chrome：111。
  • Edge：111。
  • Firefox：127。
  • Safari：16.2。

跨文件檢視畫面轉場

過去，您必須將網站重新架構為 SPA，才能使用 View Transitions API。不過現在已非如此。從 Chrome 126 開始，瀏覽器預設會為同源導覽啟用檢視畫面轉場效果。您可以在兩份相同來源文件之間建立檢視畫面轉場效果。

如要啟用跨文件檢視畫面轉場效果，兩端都必須選擇加入。如要這麼做，請使用 @view-transition at-rule，並將導覽描述符設為 auto。

@view-transition {
  navigation: auto;
}

瀏覽器支援

  • Chrome：126。
  • Edge：126。
  • Firefox：不支援。
  • Safari 技術預覽：支援。

如要進一步瞭解跨文件檢視畫面轉場效果，請參閱相關說明文件。

Gamepad API trigger-rumble 擴充功能

Chrome 126 擴充了 GamepadHapticActuator 介面，可在網頁上公開 trigger-rumble 功能，以便支援相容的遊戲搖桿。這個擴充功能可讓利用 Gamepad API 的網頁應用程式，也能讓具備此功能的控制器裝置觸發震動。

Beta 版瀏覽器

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

Safari 17.6 版修正了現有功能的問題。Safari 18 提供多項令人期待的新功能，包括樣式容器查詢、單頁應用程式的檢視畫面轉場 API，以及 Flexbox 屬性中的 safe 關鍵字支援。

Chrome 127 包含 font-size-adjust CSS 屬性、可將產生內容的 alt 文字指定為任意數量的元素，以及在 MediaMetaData 中新增個別章節資訊的功能。

Firefox 128 包含 CSS 屬性和值，因此這項功能已成為新版基準。使用 @property 定義 type，並為 CSS 自訂屬性設定備用值。