7 月初次使用網路平台

探索穩定版和 Beta 版帶來的一些有趣功能 網路瀏覽器。

穩定版瀏覽器版本

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

CSS 相對顏色語法

Firefox 128 包含 CSS 相對顏色語法 可讓您建立相對於原點顏色的顏色。 下列 CSS 使用 hsl() 將顏色 indigo 的寬度減少一半。

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

瀏覽器支援

  • 119
  • 119
  • 128
  • 16.4

您可以在這篇網誌文章中找到更多範例 CSS 相對顏色語法。 相對顏色語法是 2024 年協同整合工具的重點領域之一 這項更新有助於提升 Firefox 穩定版的分數。

content 屬性的替代文字

Firefox 128 支援 CSS content 屬性的替代文字。 圖片片段。替代文字會顯示在無障礙樹狀結構中。 這表示所有瀏覽器現在都支援 content 的替代文字。

瀏覽器支援

  • 77
  • 79
  • 128
  • 17.4 分

Chrome 127 中的更新可確保 Chrome 接受任意數量的 元素,而不只是單一字串,可讓您使用 attr() 函式

font-size-adjust 屬性

Chrome 127 包含 font-size-adjust,也是 2024 年協同整合服務的重點領域。 在可能出現字型備用的情況下,這個屬性非常實用 以便安排備用字型和第一個選擇的字型

瀏覽器支援

  • 127
  • 127
  • 3
  • 16.4

資料來源

這個 Chrome 版本將納入 font-size-adjust 屬性 現已推出基準版本

支援 iframe 中的 View Transition API

自 Chrome 127 版本起,使用者可以同時在主頁框和相同來源 iframe 中切換文件檢視畫面。

過去,如果主頁框同時執行轉場效果,則在相同來源 iframe 中使用 Document.startViewTransition 執行檢視轉換時會無法運作。系統會自動略過 iframe 的轉場效果。現在,這兩個轉換作業都會執行。

鍵盤可聚焦捲動容器

Chrome 127 版的捲動器支援可點擊和程式輔助對焦功能 根據預設。根據預設,不含可聚焦子項的捲動式是可透過鍵盤聚焦的捲動式。

請參閱這篇文章,進一步瞭解這項異動 鍵盤可聚焦捲動器

@property 規則

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

瀏覽器支援

  • 85
  • 85
  • 128
  • 16.4

資料來源

在以下範例中,自訂屬性的定義為接受 <color> 值 (僅限用於繼承) 且初始值為 hotpink

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

@property 規則現已納入基準新推出,詳情請參閱 @property:現在支援通用瀏覽器的新一代 CSS 變數

可調整大小的 ArrayBuffer,以及可調整大小的 SharedArrayBuffer

可調整大小 ArrayBuffer 而且可成長 SharedArrayBuffer 目前支援 Firefox 128 允許變更緩衝區空間,而無須分配 新的緩衝區,並將資料複製到緩衝區中 這些屬性也會加入「基準新推出」。

瀏覽器支援

  • 111
  • 111
  • 128
  • 16.4

資料來源

Flexbox 屬性中的 safe 關鍵字

Safari 17.6 主要修正了現有功能 但也包含用於 Flexbox 對齊屬性的 safe 關鍵字。 如此一來,safe 關鍵字就能在不同瀏覽器上互通。

瀏覽器支援

  • 115
  • 115
  • 63
  • 18

safe 關鍵字 避免所選對齊方式,導致內容無法在 可視區域下列 CodePen 說明執行方式 其二是置中對齊的項目如果 center 對齊會導致資料遺失,請 已改用 start

Beta 版瀏覽器版本

Beta 版瀏覽器可讓您預覽即將推出的功能 瀏覽器的穩定版。現在正是測試新功能的好時機 移除。全新內容 Beta 版是 Firefox 129Chrome 128Safari 18 Beta 版仍在開發階段 這些版本為平台帶來許多實用功能。查看版本 記下所有細節以下列舉幾個重點。

Chrome 128 包含 CSS ruby-align 屬性,並對 在包含 display: ruby 的元素內可能換行, 已配合規格更新 zoom 屬性。還有 更新 AudioContext API,新增指派的回呼 AudiContext.onerror,回報音訊 Context 建立和轉譯錯誤。

Firefox 129 包含 @starting-style 規則和 transition-behavior 資源。這些屬性將成為「Baseline 新提供一次」的一部分 Firefox 129 已發布至穩定版。