6 月初次使用網路平台

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

Rachel Andrew

發布日期：2026 年 6 月 30 日

穩定版瀏覽器

Chrome 149、Chrome 150 和 Firefox 152 已於 6 月發布穩定版。本月沒有 Safari 穩定版發布。這篇文章將介紹網頁瀏覽器的新功能。

使用 field-sizing 調整表單控制項大小，成為基準

Firefox 152 導入了對 field-sizing CSS 屬性的支援，讓自動表單控制項大小調整功能在所有主要瀏覽器引擎中都可使用。

field-sizing 屬性可讓表單控制項 (例如 <textarea>、<input> 和 <select>) 動態縮放，以配合內容 (field-sizing: content)，而不是維持預設大小 (field-sizing: fixed)。這樣一來，在建構文字輸入或文字區域時，就不必使用 JavaScript 變通方法，讓這些控制項在使用者輸入文字時調整大小。

textarea {
  field-sizing: content;
}

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 152.
  • Safari: 26.2.

Source

shape-outside 中的基本形狀 rect() 和 xywh() 會成為 Baseline

Chrome 149 版支援 shape-outside 屬性中的 rect() 和 xywh() 形狀函式，因此這些基本形狀現在已成為 Baseline，可在主要瀏覽器中使用。

rect() 和 xywh() 函式可讓您使用確切的插邊座標或來源和維度語法，定義矩形浮動排除區域。與使用 polygon() 矩形浮動包裝形狀相比，這種方式的語法更簡單易讀。

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: 149.
  • Safari: 17.2.

Source

使用 CSS text-fit 自動調整字型大小

Chrome 150 推出 text-fit CSS 屬性，可讓開發人員自動調整字型大小，配合容器方塊的寬度。

.headline {
  text-fit: grow;
}

CSS 間距裝飾

Chrome 149 版開始支援格線和彈性方塊版面配置中的 CSS 間距裝飾。您可以透過間距裝飾，直接在格線和彈性項目間的間距新增線條和樣式，類似於多欄版面配置中的 column-rule。

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

詳情請參閱「間隙裝飾：現已在 Chromium 中推出」。

Browser Support

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

CSS background-clip: border-area

Chrome 150 新增支援 CSS 背景第 4 級的 background-clip: border-area。

這個值會將元素背景剪裁至邊框區域，讓您建立自訂漸層邊框、裝飾性框架邊緣和動畫邊框效果，不必使用額外的包裝元素或虛擬元素。

Browser Support

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

程式輔助捲動承諾

Chrome 150 會更新程式輔助捲動方法 (scrollTo()、scrollBy() 和 scrollIntoView())，以傳回 Promise。

順暢捲動動畫完成時，傳回的 Promise 會解析，提供可靠的信號，以便在捲動完成後觸發後續動作。

使用 focusgroup 宣告式鍵盤導覽

Chrome 150 開始支援 focusgroup 屬性。

開發人員可透過 focusgroup 屬性，以宣告方式管理複合式 UI 控制項 (例如工具列、分頁清單和選單) 的方向鍵導覽，不必手動編寫鍵盤事件監聽器。

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

詳情請參閱焦點團體說明。

往返快取 (bfcache) 支援 WebSocket

在 Chrome 149 中，具有有效 WebSocket 連線的網頁現在可以進入往返快取 (bfcache)。

先前，開放式 WebSocket 連線會導致網頁不適用往返快取。現在，瀏覽器會在 bfcache 項目輸入時自動關閉有效的 WebSocket 連線，讓網頁能夠快取，並在返回時立即還原。

資源時間軸中的暫時和標頭回應時間

Firefox 152 新增對 PerformanceResourceTiming 介面上 firstInterimResponseStart 和 finalResponseHeadersStart 的支援。

這些指標可用於分別測量瀏覽器在傳送要求後，接收到 HTTP 中間回應和最終 HTTP 回應所需的時間。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 152.
  • Safari: 26.4.

Source

通知的動作按鈕

Firefox 152 新增了通知動作按鈕的支援，方法是在 Notification 上使用 actions 屬性，以及 ServiceWorkerRegistration.showNotification() 中的選項。

您現在可以在 OS 通知中加入動作按鈕，並在使用者輕觸按鈕時監聽互動。

Browser Support

  • Chrome: 53.
  • Edge: 18.
  • Firefox: 152.
  • Safari: not supported.

Source

Beta 版瀏覽器

Beta 版瀏覽器可讓您提前試用下一個穩定版瀏覽器的功能。在正式發布前，您可以測試可能影響網站的新功能或移除項目。本月推出的新 Beta 版包括： Firefox 153 和 Safari 27。

Firefox 153 Beta 版支援 Error.stackTraceLimit，可設定擷取的堆疊追蹤深度上限、IDBObjectStore.getAllRecords() 可擷取已編列索引的記錄，以及 RTCDtlsTransport.getRemoteCertificates() 可進行 WebRTC 安全檢查。IDBIndex.getAllRecords()外掛程式開發人員也能使用新的 publicSuffix API 和 userScripts.execute() 方法，視需要注入指令碼。

Safari 27 Beta 版推出可感知轉換的錨點定位、用於比對標題元素的 :heading 虛擬類別、用於回溯層疊層的 revert-rule 關鍵字、支援方塊大小調整的 stretch 關鍵字，以及 :host:has() 複合選取器。