發布日期: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-reset 和 counter-increment。在處理編號清單、文件大綱或自訂計數器序列時,這項功能可提供控制權。
詳情請參閱 MDN 頁面上的 counter-set。
createImageBitmap()
createImageBitmap() 靜態方法會從各種圖片來源 (包括 <img>、<canvas>、Blob 或 ImageData) 建立非同步點陣圖圖片。由於這項工具會在主執行緒外解碼圖片,因此處理複雜的畫布圖像時,不會影響 UI 效能。
如要瞭解實作詳細資料,請參閱 MDN 說明文件中的 createImageBitmap。
<easing-function>資料類型
<easing-function> CSS 資料類型說明轉換和動畫的數學變化率曲線。除了 ease-in 或 cubic-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 虛擬類別會根據文字方向性 (例如 ltr 或 rtl) 比對元素,比對方向則會從 HTML 屬性 (例如 dir) 或計算出的文字情境繼承。
詳情請參閱 MDN 頁面,瞭解 :dir 虛擬類別。
pow() 數學函式
pow() CSS 函式會直接在 CSS 宣告中計算指數值,將底數提高至指數 (例如 pow(2, 3))。這可簡化回應式縮放和數學格線關係。
請參閱 MDN 參考資料,瞭解 pow 函式的詳細資訊。
CSS mask 屬性
mask CSS 簡寫屬性會使用圖片或漸層做為剪輯圖層,隱藏元素的部分內容。它會結合 mask-image、mask-position 和 mask-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 中提出問題。