瞭解 2024 年 7 月推出的穩定版和 Beta 版網頁瀏覽器中,有哪些有趣的功能。
穩定版瀏覽器
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);
}
Browser Support
您可以在「CSS 相對色彩語法」一文中找到更多範例。相對色彩語法是 Interop 2024 的焦點之一,因此這項更新有助於提升 Firefox 穩定版的分數。
content
屬性的替代文字
Firefox 128 支援 CSS content
屬性 (當中包含圖片時) 的替代文字。替代文字會顯示在無障礙樹狀結構中。也就是說,所有瀏覽器現在都支援 content
的替代文字。
Browser Support
Chrome 127 中的更新可確保 Chrome 接受任意數量的元素,而非僅接受單一字串,例如可使用 attr()
函式。
font-size-adjust
屬性
Chrome 127 包含 font-size-adjust
,也是 Interop 2024 的焦點領域。當字型備用可用時,這個屬性就很實用,因為它可讓您將備用字型的大小與第一個選擇的字型相符。
在這個 Chrome 版本中,font-size-adjust
屬性將成為基準新功能的一部分。
支援 iframe 中的 View Transition API
自 Chrome 127 起,主要框架和相同來源 iframe 中的相同文件檢視畫面轉換將可同時進行。
先前,如果主框架同時執行轉場效果,在同源 iframe 中使用 document.startViewTransition 執行檢視畫面轉場效果就會失敗。iframe 的轉場效果會自動略過。現在,系統會執行兩種轉場效果。
可透過鍵盤聚焦的捲動容器
從 Chrome 127 開始,捲軸預設可透過點按和程式輔助方式聚焦。沒有可聚焦子項的捲軸預設可透過鍵盤聚焦。
如要進一步瞭解這項變更,請參閱「可供鍵盤聚焦的捲軸」一文。
@property
規則
Firefox 128 支援 @property
規則和相關 JavaScript API。也就是說,您可以建立 CSS 自訂屬性,定義語法、繼承和初始值。
在以下範例中,自訂屬性會定義為只接受 <color>
值、不繼承,且初始值為 hotpink
。
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
@property
規則現已納入「新版基準」(Baseline),詳情請參閱 @property:新一代 CSS 變數現已支援通用瀏覽器。
可調整大小的 ArrayBuffer
和可擴充的 SharedArrayBuffer
Firefox 128 現已支援可調整大小的 ArrayBuffer 和可擴充的 SharedArrayBuffer,可讓您變更緩衝區大小,而無須配置新的緩衝區並將資料複製到其中。這些屬性也會加入「新發布」基準。
Flexbox 屬性中的 safe
關鍵字
Safari 17.6 主要是針對現有功能修正錯誤,但也包含用於 flexbox 對齊屬性的 safe
關鍵字。這可讓 safe
關鍵字在不同瀏覽器間互通。
Browser Support
safe
關鍵字可避免所選對齊方式導致內容顯示在可視區域之外。下列 CodePen 會顯示此做法如何與置中對齊的項目互動。如果 center
對齊方式導致資料遺失,系統會改用 start
。
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 穩定版發布後,這些屬性就會成為「新可用」基準值的一部分。