7 月初次使用網路平台

探索 2024 年 7 月，我們在穩定版和 Beta 版網路瀏覽器中推出的一些有趣功能。

Rachel Andrew

穩定版瀏覽器

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

CSS 相對顏色語法

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

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

瀏覽器支援

  • Chrome：119。
  • Edge：119。
  • Firefox：128。
  • Safari：16.4。

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

content 屬性的替代文字

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

瀏覽器支援

  • Chrome：77。
  • Edge：79。
  • Firefox：128。
  • Safari：17.4。

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

font-size-adjust 屬性

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

瀏覽器支援

  • Chrome：127。
  • Edge：127。
  • Firefox：3.
  • Safari：16.4。

資料來源

此 Chrome 發布後，font-size-adjust 屬性將成為《Baseline Newly available》階段的一部分。

支援 iframe 中的 View Transition API

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

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

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

Chrome 127 版的捲動器是可聚焦的，且可透過程式輔助方式聚焦。根據預設，不含可聚焦子項的捲動式是可透過鍵盤聚焦的捲動式。

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

@property 規則

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

瀏覽器支援

  • Chrome：85。
  • Edge：85。
  • Firefox：128。
  • Safari：16.4。

資料來源

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

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

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

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

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

瀏覽器支援

  • Chrome：111。
  • Edge：111。
  • Firefox：128。
  • Safari：16.4。

資料來源

Flexbox 屬性中的 safe 關鍵字

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

瀏覽器支援

  • Chrome：115。
  • Edge：115。
  • Firefox：63。
  • Safari：17.6。

safe 關鍵字可避免所選對齊方式導致內容顯示在可視區域之外。以下 CodePen 顯示此程式碼如何與置中對齊的項目搭配運作。如果 center 對齊方式導致資料遺失，系統會改用 start。

Beta 版瀏覽器

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

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

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