5 月初次使用網路平台

瞭解 2026 年 5 月在穩定版和 Beta 版網頁瀏覽器中推出的有趣功能。

Rachel Andrew

發布日期：2026 年 5 月 29 日

穩定版瀏覽器

Chrome 148、Firefox 151 和 Safari 26.5 已於 5 月發布穩定版。本文將介紹本月推出的多項新功能。

:open CSS 虛擬類別成為 Baseline

Safari 26.5 版主要修正了現有功能。不過，這項功能也支援 :open 虛擬類別，因此已成為 Baseline Newly available 功能。

:open 虛擬類別可讓您在元素處於開啟狀態時，為「開啟」和「關閉」狀態的元素設定樣式。這適用於開啟時的 <details> 和 <dialog> 等元素，以及顯示選擇器介面時的 <select> 和 <input> 元素 (例如顏色或日期選擇器)。相較於使用 details[open] 等屬性設定樣式，這個選項更簡潔，也更符合語意。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 136.
  • Safari: 26.5.

Source

僅限名稱的 CSS 容器查詢成為基準

Chrome 148 將於本月發布，僅限名稱的容器查詢現已成為 Baseline Newly available。

先前編寫容器查詢時，您必須指定大小或樣式查詢條件，以及容器名稱，並使用 container-type 屬性建立容器類型。現在，您只需依名稱查詢具名容器是否存在，不必設定任何額外條件。此外，如果您只依名稱查詢，就不需要在祖系上設定 container-type：

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: 149.
  • Safari: 26.4.

自訂屬性的容器樣式查詢會成為 Baseline

Firefox 151 支援對 @container 進行 style() 查詢，讓自訂屬性的容器樣式查詢成為 Baseline 新功能。

容器樣式查詢功能可讓您根據父項容器的 CSS 屬性，對元素套用樣式。大小查詢功能非常強大，但樣式查詢可讓您查詢非大小功能。具體來說，這個版本全面支援跨瀏覽器查詢自訂屬性。舉例來說，您可以在父項容器中檢查自訂屬性 --theme 是否設為 dark：

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

影片和音訊元素的延遲載入

Chrome 148 針對含有 loading="lazy" 屬性的 <video> 和 <audio> 元素，導入了原生延遲載入功能。

與 <img> 和 <iframe> 元素一樣，您現在可以指示瀏覽器延遲載入媒體資源，直到這些資源接近檢視區塊為止。這有助於提升網頁載入效能、節省頻寬，並減少使用者的資料用量。如要進一步瞭解如何使用標準 HTML 影片和音訊的網頁延遲載入功能，請參閱這篇文章。

Browser Support

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

Source

文件子母畫面 API

Firefox 151 在桌機平台導入了 Document Picture-in-Picture API 支援。

標準的 Picture-in-Picture API 可讓您在永遠置頂的視窗中查看 <video> 元素，而 Document Picture-in-Picture API 則可開啟永遠置頂的視窗，其中包含任意 HTML 內容。這項功能可啟用豐富的互動式重疊畫面，例如視訊會議參與者格線、互動式股票行情顯示器或計時器，即使離開網頁也會持續顯示。

Browser Support

  • Chrome: 116.
  • Edge: 116.
  • Firefox: 151.
  • Safari: not supported.

Source

Web Serial API 擴大平台支援範圍

Firefox 151 在桌機平台新增了 Web Serial API 支援功能，Chrome 148 則在 Android 上新增了這項支援功能。

網站可透過 Web Serial API 讀取及寫入序列裝置，例如微控制器、3D 印表機、開發板和周邊硬體。在 Firefox 中，使用 Web Serial API 時，使用者必須安裝系統自動產生的網站權限外掛程式，確保存取權管理機制安全可控。

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 151.
  • Safari: not supported.

Source

Beta 版瀏覽器

Beta 版瀏覽器可讓您提前試用下一個穩定版瀏覽器的功能。您可以在全球發布前，測試可能影響網站的新功能或移除項目。本月推出的新 Beta 版包括 Chrome 149 和 Firefox 152。本月沒有 Safari Beta 版。

Chrome 149 Beta 版包含多項令人期待的 CSS 更新，例如 CSS 間隙裝飾，可讓您設定彈性和格線項目之間的空白間隙樣式。此外，它也支援 path() 和 shape()，以及 shape-outside 屬性中的 rect() 和 xywh() 基本形狀函式，以及做為 CSS 屬性的 path-length。在 API 方面，程式輔助捲動方法 (例如 scrollTo()、scrollBy() 和 scrollIntoView()) 現在會傳回 Promise，在平滑捲動完成時解析，且具有有效 WebSocket 連線的網頁現在可符合返回/轉送快取 (BFCache) 的資格。

Firefox 152 Beta 版全面支援 field-sizing 屬性，可讓表單控制項自動調整大小，配合內容顯示。此外，這個版本也會在 Notification 介面中新增 actions 和 maxActions 屬性，並在 Element.getAnimations() 中新增 options.pseudoElement 支援。