2026 年 6 月基準每月摘要

發布日期:2026 年 7 月 17 日

歡迎再次閱讀 Baseline 月刊摘要。2026 年 6 月,field-sizing Baseline Newly 可用,表單控制項可自動調整 內容。同時,許多 CSS、HTML 和 Web API 功能也達到 Baseline Widely available 狀態,開發人員社群也發布了重要更新。

網站平台狀態的基準快訊

現在只要查看 Web Platform Status 資訊主頁上的 Baseline 警示,即可輕鬆掌握網頁功能何時可互通。使用 GitHub 登入後,您就能在功能成為 Baseline 新推出、廣泛推出或收到新的瀏覽器實作項目時,訂閱相關通知。您可以設定訂閱項目,讓系統每月、每週或立即傳送電子郵件更新或自訂 RSS 動態消息。您可以將快訊範圍限定為已儲存的搜尋內容 (例如所有 HTML 功能),建立自訂電子報、產生可共用的功能清單,或設定 Slack Webhook 來通知工程團隊。

詳情請參閱「推出基準警示」。

基準新功能

本節中的功能自 2026 年 6 月起,已在核心瀏覽器集中提供支援,現在已成為 Baseline Newly available。

field-sizing

field-sizing CSS 屬性可控管表單元素 (例如 <textarea><input><select>) 的大小調整行為,這些元素傳統上都有預設的固定尺寸。field-sizing: content表單控制項會自動展開或縮小以配合內容,因此您不需要自訂 JavaScript 自動調整大小的指令碼。

詳情請參閱 field-sizing 的 MDN 參考頁面

普遍可用的 Baseline 功能

下列功能已成為 Baseline 廣泛可用的功能,表示這些功能現在廣泛相容,且可在專案中使用。

:has() 虛擬類別

:has() CSS 父項選取器可讓您根據元素的後代或後續同層級元素設定樣式。這個函式虛擬類別可直接在 CSS 中啟用條件式版面配置模式,不必使用 JavaScript 檢查 DOM 結構。

詳情請參閱 :has 虛擬類別的 MDN 頁面

HTMLIFrameElement.loading

<iframe> 元素上的 loading 屬性可啟用內嵌框架的延遲載入功能。指定 loading="lazy" 後,瀏覽器會延遲載入畫面外 iframe,直到捲動至可視區域附近為止,藉此節省網路頻寬和初始網頁載入的額外負擔。

如需詳細資料,請參閱 MDN 參考資料中的 HTMLIFrameElement.loading

CanvasRenderingContext2D.reset()

2D 畫布內容的 reset() 方法會清除繪圖內容狀態,並將轉換、剪輯路徑、線條樣式和填滿樣式等屬性重設為預設值。這樣一來,畫布內容就能乾淨地重複使用,不必手動清除屬性。

詳情請參閱 CanvasRenderingContext2D.reset 的 MDN 說明文件

cap 長度單位

cap 字型相對單位對應至元素字型的名義大寫高度。您可以根據大寫字母的高度對齊元素並調整大小,實現精確的排版配置。

詳情請參閱 MDN 參考資料,瞭解長度單位

counter-set 資源

counter-set CSS 屬性會將 CSS 計數器設為指定值,並補足 counter-resetcounter-increment。在處理編號清單、文件大綱或自訂計數器序列時,這項功能可提供控制權。

詳情請參閱 MDN 頁面上的 counter-set

createImageBitmap()

createImageBitmap() 靜態方法會從各種圖片來源 (包括 <img><canvas>BlobImageData) 建立非同步點陣圖圖片。由於這項工具會在主執行緒外解碼圖片,因此處理複雜的畫布圖像時,不會影響 UI 效能。

如要瞭解實作詳細資料,請參閱 MDN 說明文件中的 createImageBitmap

<easing-function>資料類型

<easing-function> CSS 資料類型說明轉換和動畫的數學變化率曲線。除了 ease-incubic-bezier() 等標準關鍵字,還支援 linear() 等函式,可建構自訂彈簧或彈跳效果。

如要瞭解如何使用,請參閱 MDN 參考資料中的 easing-function

& 巢狀選取器

使用內建 CSS 巢狀結構時,& 巢狀結構選取器會將子項規則選取器明確錨定至父項選取器。定義巢狀懸停、焦點或虛擬類別狀態時,可確保清楚且符合正確的特異性規則。

詳情請參閱 MDN 巢狀選取器指南

使用 rel="preload" 預先載入回應

<link rel="preload"> 元素上的 media 屬性可啟用重要資產的預先載入功能,並支援回應式設計。結合 rel="preload" 和媒體查詢後,瀏覽器只會在載入生命週期的早期,下載符合使用者可視區域寬度或螢幕特徵的資產。

如要瞭解如何使用,請參閱 rel="preload" 的 MDN 說明文件

HTMLMediaElement.preservesPitch

<audio><video> 元素上的 preservesPitch 屬性可控制瀏覽器是否要在變更 playbackRate 時調整音訊音調。設為 false 可在加快或放慢媒體播放速度時調整音調。

詳情請參閱 HTMLMediaElement.preservesPitch 的 MDN 頁面

:dir() 虛擬類別

:dir() CSS 虛擬類別會根據文字方向性 (例如 ltrrtl) 比對元素,比對方向則會從 HTML 屬性 (例如 dir) 或計算出的文字情境繼承。

詳情請參閱 MDN 頁面,瞭解 :dir 虛擬類別

pow() 數學函式

pow() CSS 函式會直接在 CSS 宣告中計算指數值,將底數提高至指數 (例如 pow(2, 3))。這可簡化回應式縮放和數學格線關係。

請參閱 MDN 參考資料,瞭解 pow 函式的詳細資訊。

CSS mask 屬性

mask CSS 簡寫屬性會使用圖片或漸層做為剪輯圖層,隱藏元素的部分內容。它會結合 mask-imagemask-positionmask-repeat 等子屬性,建立複雜的視覺遮罩效果。

詳情請參閱 mask 屬性的 MDN 頁面

@media (scripting)

scripting 媒體功能會測試瀏覽器環境是否已啟用並支援用戶端指令碼 (例如 JavaScript)。這樣一來,漸進增強樣式就能以有或沒有作用中 JavaScript 的環境為目標。

詳情請參閱 MDN 參考資料,瞭解指令碼媒體功能

URL.canParse()

URL.canParse() 靜態方法會檢查指定字串是否為有效且可剖析的網址 (可選用基本網址),不會擲回例外狀況,簡化執行階段網址驗證程序,再例項化 URL 物件。

如要瞭解實作詳細資料,請參閱 MDN 說明文件中的 URL.canParse

儲存空間存取權 API

Storage Access API 提供一種機制,可讓嵌入第三方 <iframe> 的跨網站內容要求存取未分割的 Cookie 和儲存空間,以便跨網域界線進行驗證和有狀態的互動。

詳情請參閱 MDN 儲存空間存取 API 頁面

結論

如果我們遺漏了任何與 Baseline 相關的內容,請告訴我們,我們會確保在日後版本中補上!如有任何問題或想提供有關 Baseline 的意見回饋,請在 Issue Tracker 中提出問題。