網路平台 10 月新知

探索 2026 年 10 月在穩定版和 Beta 版網路瀏覽器中推出的有趣功能。

Rachel Andrew

發布日期：2026 年 10 月 29 日

穩定版瀏覽器

Chrome 155、Chrome 156、Firefox 158、Firefox 159、Safari 27.1 和 Safari 27.2 於 2026 年 10 月發布穩定版。本文將介紹本月在各瀏覽器推出的新功能，其中有幾項重大功能已達到「新加入基準」狀態。

捲動式動畫成為基準

Firefox 159 預設啟用捲動驅動動畫。

捲動驅動動畫可讓您將 CSS 動畫或 Web Animations API 動畫的進度連結至捲動容器的捲動偏移量 (使用 scroll-timeline 和 scroll() 函式)，或連結至捲動區塊內元素的可見度 (使用 view-timeline 和 view() 函式)，並指派 animation-timeline：

Chrome、Safari 和 Firefox 159 現已支援捲動驅動動畫，這項功能已納入基準新加入。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 159.
  • Safari: 26.

Source

請參閱「捲動驅動動畫：新加入基準的歷程」，並捲動時間軸，瞭解捲動驅動動畫如何從 2014 年初的提案，演變成可在所有核心瀏覽器引擎上執行的互通網頁標準。

限定範圍的自訂元素註冊資料庫成為基準

Firefox 159 新增限定範圍的自訂元素註冊資料庫支援。

過去，所有自訂元素都必須在單一全域 window.customElements 登錄檔中註冊，因此在合併不同程式庫或團隊的元件時，可能會發生命名衝突。您現在可以使用 CustomElementRegistry() 建構函式建立獨立的 CustomElementRegistry 執行個體，並將其定義範圍限定在特定陰影樹狀結構。customElementRegistry 屬性也適用於 Document、Element 和 ShadowRoot。

Chrome、Safari 和 Firefox 159 均支援範圍自訂元素註冊，因此這項功能現已納入基準新加入。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 159.
  • Safari: 26.

Source

支援 JPEG XL 圖片

Chrome 155 和 Firefox 158 預設支援 JPEG XL (image/jxl) 圖片格式。

JPEG XL 是免權利金的光柵圖片格式，已標準化為 ISO/IEC 18181。支援有損和無損壓縮、漸進式解碼、廣色域、高動態範圍 (HDR)、高位元深度、透明度和動畫，以及現有 JPEG 檔案的無損轉碼。Firefox 158 也更新了圖片要求的預設 HTTP Accept 標頭，納入 image/jxl。

詳情請參閱「在 Chrome 中推出 JPEG XL」。

Browser Support

  • Chrome: 155.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 17.

Source

CSS 類型化算術成為基準

Firefox 158 新增對 calc() 等數學函式中 CSS 類型算術的支援。

CSS 類型算術可讓您將兩個相同資料類型的值相除 (即使使用不同單位)，產生不含單位的 <number> 商。您可以直接在接受數字的屬性 (例如 opacity 或 line-height) 中使用該無單位結果，或將其乘以另一個單位，在類型之間進行轉換：

Firefox 158 支援 CSS 類型算術，加上 Chrome 和 Safari 既有的支援，CSS 類型算術現已成為基準 新推出。

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: 158.
  • Safari: 26.

PerformanceResourceTiming.deliveryType

Firefox 158 新增對 PerformanceResourceTiming.deliveryType 屬性的支援。

這項屬性會指出資源的傳送方式，例如從快取提供資源時，會傳回 "cache"。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 158.
  • Safari: 26.4.

Source

random() CSS 函式

Chrome 156 新增對 random() CSS 函式的支援。

random() 函式會在指定的最小值和最大值範圍內，產生隨機數值，並可選擇是否指定步進間隔。根據預設，每個 random() 呼叫都會解析為不同的隨機值，您也可以傳遞 <random-key> 做為第一個引數，在屬性或元素之間共用隨機值：

如需範例，請參閱 Smashing Magazine 上的「Embracing playful imperfection with the CSS random() function」一文。

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox Technology Preview: supported.
  • Safari: 26.2.

Source

margin-trim CSS 屬性

Chrome 155 新增對區塊容器和多欄容器的 margin-trim CSS 屬性支援。

您可以在容器上使用 margin-trim，省略子項元素與容器邊緣交接處的邊界，避免在第一個子項之前或最後一個子項之後出現額外間距，而不需要 :first-child 或 :last-child 覆寫。

詳情請參閱「使用 margin-trim 屬性移除開頭和結尾邊界」。

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: not supported.
  • Safari: 16.4.

Source

使用 symbols() CSS 函式內嵌計數器樣式

Chrome 155 開始支援 symbols() CSS 函式。

symbols() 函式可讓您直接在 list-style-type、list-style 簡寫、counter() 或 counters() 中定義匿名計數器樣式，而不必宣告個別命名的 @counter-style at 規則。

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 35.
  • Safari Technology Preview: supported.

Source

text-decoration-skip-spaces CSS 屬性

Chrome 155 新增 text-decoration-skip-spaces CSS 屬性，可控制文字裝飾線 (例如底線、頂線和刪除線) 是否略過空白字元。這樣一來，您就能避免在開頭、結尾或字詞之間的空格下方繪製裝飾。

Browser Support

  • Chrome: 155.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: not supported.

:navigation-source CSS 虛擬類別

Chrome 156 推出 :navigation-source CSS 虛擬類別。它會比對啟動導覽的連結、按鈕或表單元素，並在整個導覽過程中保持選取該元素。

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox: not supported.
  • Safari: not supported.

JavaScript 文字模組匯入，以及重試失敗的模組載入

Chrome 155 新增支援使用 import ... with { type: "text" } 匯入文字模組，與 Firefox 相同。type: "text" 匯入屬性會將目標模組的內容載入為 JavaScript 字串。

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 153.
  • Safari: not supported.

Source

Chrome 156 也更新了模組載入行為，因此失敗的模組載入作業不會再永久快取。應用程式現在可以重試載入失敗的模組，例如在暫時性網路故障後再次呼叫 import()。

Chrome 和 Firefox 的 WebTransport 更新

Firefox 158 和 Chrome 156 都擴充了 WebTransport：

Firefox 158 新增 WebTransport.getStats() 方法，用於擷取連線和資料圖統計資料，以及靜態 WebTransport.supportsReliableOnly 屬性，指出瀏覽器是否支援透過可靠傳輸方式進行 WebTransport 工作階段。

Browser Support

  • Chrome: 157.
  • Edge: 157.
  • Firefox: 158.
  • Safari: 26.4.

Source

Chrome 156 新增支援功能，可在初始 CONNECT 握手期間，在 WebTransportOptions 中傳遞自訂 HTTP 要求標頭，並從 WebTransport 執行個體讀取伺服器回應標頭。

Firefox 中的「Notification」navigate選項

Firefox 158 新增對 Notification() 建構函式和 ServiceWorkerRegistration.showNotification() 中 navigate 選項的支援，以及 Notification.navigate 屬性，加入 Safari。這個選項會指定網址，讓瀏覽器在使用者點選系統通知時前往該網址。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 18.5.

Source

Firefox 的 HTML Sanitizer API 更新

Firefox 158 在 HTML Sanitizer API 中新增 javascriptURLs 設定選項和 Sanitizer.setJavascriptURLs()，用於控制在使用不安全的 HTML 插入方法 (例如 Element.setHTMLUnsafe()) 時，是否要移除包含 javascript: 網址的屬性。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: not supported.

Firefox 159 也更新了安全的清理方法，例如 Element.setHTML()，在剖析期間 (而非建構 DOM 樹狀結構後) 移除不必要的元素和屬性，確保相鄰文字保留在單一文字節點中。

在 Safari 中將 flow-tolerance 重新命名為 fit-tolerance

Safari 27.2 將格線車道版面配置 (display: grid-lanes) 的 flow-tolerance 屬性重新命名為 fit-tolerance，並保留 flow-tolerance 做為已淘汰的別名。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: 26.4.

Beta 版瀏覽器

Beta 版瀏覽器可讓您預覽下一個穩定版瀏覽器的功能。在正式發布前，您可以測試新功能或移除功能，瞭解這些異動對網站的影響。本月的新 Beta 版包括 Chrome 157、Chrome 158 和 Firefox 160。

Chrome 157 Beta 版包含 CSS corner 簡寫和邊緣子簡寫，可同時設定 border-radius 和 corner-shape、text-decoration-inset、text-overflow: <string>、position-visibility: anchor-valid 和 anchor-visible。此外，也支援 HTML-in-canvas 算繪，以及 <camera>、<microphone> 和 <geolocation> 功能元素的僅限圖示 displaymode 屬性。

Chrome 158 Beta 版推出宣告式 HTML <install> 元素和 Web Install API (navigator.install())，用於跨來源網頁應用程式安裝。CSS 和 SVG 新增項目包括 ::highlight(*) 通用自訂重點選取器、媒體元素狀態虛擬類別 (:playing、:paused、:seeking、:buffering、:stalled、:muted、:volume-locked)、flow-start 和 flow-end 對齊關鍵字，以及 circle() 和 ellipse() 基本形狀的 closest-corner 和 farthest-corner 半徑。

Firefox 160 Beta 版更新了 WebExtensions runtime.PlatformInfo API，在 ARM64 平台上傳回 arch 為 arm64，而非 aarch64，與 Chrome 一致。