6 月初次使用網路平台

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

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

集合是任何程式語言中不可或缺的資料結構。您現在可以使用 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 128Chrome 127Safari 18Safari 17.6。這些版本為平台帶來許多精彩功能。如需瞭解所有詳細資訊,請參閱版本資訊。以下列舉幾個重點。

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

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

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