7 月初次使用網路平台

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

2024 年 7 月,Firefox 128Safari 17.6Chrome 127 已穩定推出。本文將介紹網頁平台新增的功能。

Firefox 128 包含 CSS 相對顏色語法,可讓您建立相對於原始顏色的顏色。以下 CSS 會使用 hsl() 將顏色 indigo 的飽和度降低一半。

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 18.

您可以在「CSS 相對色彩語法」一文中找到更多範例。相對色彩語法是 Interop 2024 的焦點之一,因此這項更新有助於提升 Firefox 穩定版的分數。

content 屬性的替代文字

Firefox 128 支援 CSS content 屬性 (當中包含圖片時) 的替代文字。替代文字會顯示在無障礙樹狀結構中。也就是說,所有瀏覽器現在都支援 content 的替代文字。

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4.

Chrome 127 中的更新可確保 Chrome 接受任意數量的元素,而非僅接受單一字串,例如可使用 attr() 函式。

font-size-adjust 屬性

Chrome 127 包含 font-size-adjust,也是 Interop 2024 的焦點領域。當字型備用可用時,這個屬性就很實用,因為它可讓您將備用字型的大小與第一個選擇的字型相符。

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

在這個 Chrome 版本中,font-size-adjust 屬性將成為基準新功能的一部分。

支援 iframe 中的 View Transition API

自 Chrome 127 起,主要框架和相同來源 iframe 中的相同文件檢視畫面轉換將可同時進行。

先前,如果主框架同時執行轉場效果,在同源 iframe 中使用 document.startViewTransition 執行檢視畫面轉場效果就會失敗。iframe 的轉場效果會自動略過。現在,系統會執行兩種轉場效果。

可透過鍵盤聚焦的捲動容器

從 Chrome 127 開始,捲軸預設可透過點按和程式輔助方式聚焦。沒有可聚焦子項的捲軸預設可透過鍵盤聚焦。

如要進一步瞭解這項變更,請參閱「可供鍵盤聚焦的捲軸」一文。

@property 規則

Firefox 128 支援 @property 規則和相關 JavaScript API。也就是說,您可以建立 CSS 自訂屬性,定義語法、繼承和初始值。

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

在以下範例中,自訂屬性會定義為只接受 <color> 值、不繼承,且初始值為 hotpink

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

@property 規則現已納入「新版基準」(Baseline),詳情請參閱 @property:新一代 CSS 變數現已支援通用瀏覽器

可調整大小的 ArrayBuffer 和可擴充的 SharedArrayBuffer

Firefox 128 現已支援可調整大小的 ArrayBuffer 和可擴充的 SharedArrayBuffer,可讓您變更緩衝區大小,而無須配置新的緩衝區並將資料複製到其中。這些屬性也會加入「新發布」基準。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128.
  • Safari: 16.4.

Source

Flexbox 屬性中的 safe 關鍵字

Safari 17.6 主要是針對現有功能修正錯誤,但也包含用於 flexbox 對齊屬性的 safe 關鍵字。這可讓 safe 關鍵字在不同瀏覽器間互通。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63.
  • Safari: 17.6.

safe 關鍵字可避免所選對齊方式導致內容顯示在可視區域之外。下列 CodePen 會顯示此做法如何與置中對齊的項目互動。如果 center 對齊方式導致資料遺失,系統會改用 start

Beta 版瀏覽器

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

Chrome 128 包含 CSS ruby-align 屬性,以及讓具有 display: ruby 的元素內可出現換行的變更,zoom 屬性也已更新,以符合規格。AudioContext API 已更新,新增了指派給 AudiContext.onerror 的回呼,可回報 AudioContext 建立和轉譯錯誤。

Firefox 129 包含 @starting-style 規則和 transition-behavior 屬性。在 Firefox 129 穩定版發布後,這些屬性就會成為「新可用」基準值的一部分。