7 月初次使用網路平台

2022 年 7 月,我們在穩定版和 Beta 版網路瀏覽器中推出了幾項有趣的功能,歡迎一探究竟。

穩定版瀏覽器版本

7 月時,Firefox 103Safari 15.6 已穩定運作,進而實現了幾項良好的 CSS 功能互通性。

backdrop-filter 屬性

Firefox 103 包含 backdrop-filter 屬性,可用於對元素後方的區域進行模糊處理等效果。在 Firefox 中使用這個值,目前可用於所有三種引擎,但 Safari 規定要加上 -webkit 前置字元。

瀏覽器支援

  • 76
  • 79
  • 103
  • 18

資料來源

scroll-snap-stop 屬性

Firefox 也導入了 scroll-snap-stop 屬性。這個屬性可讓您控制捲動元素是通過可能的貼齊位置 (預設值為 normal),還是必須對齊第一個位置 (使用 always 值)。scroll-snap-stop 屬性現在全都可供這三個瀏覽器引擎使用。

瀏覽器支援

  • 75
  • 79
  • 103
  • 15

資料來源

Safari 15.6 是專門用來解決問題的版本,但還透過 :modal 虛擬類別導入一項新的 CSS 功能。這項功能也是在 Firefox 103 推出。:modal 虛擬類別會選取元素,當該元素以外的所有項目都無法在元素關閉前與其互動時,就會選取該元素。例如以 showModal() 開啟的 dialog 元素。

瀏覽器支援

  • 105
  • 105
  • 103
  • 15.6

資料來源

Beta 版瀏覽器版本

Beta 版瀏覽器可讓您預覽下一個穩定版本的功能。因此,現在當全球版本發布之前,建議你多多測試新功能或移除現有功能,進而對網站造成影響。

由於推出日期不在當月,因此 6 月推出的全新 Beta 版是 Firefox 104

Firefox 104 包含 Web Worker 中的 CSS Font 正在載入 API,以及 CSS animation-composition 屬性,可定義多個動畫同時影響相同屬性時,所使用的組合作業。

此外,上個月提到的 Safari 16 Beta 版仍在持續開發中。

這些 Beta 版功能即將在穩定版瀏覽器中推出。

網路系列新作精選內容