發布日期:2026 年 6 月 3 日
歡迎閱讀 Baseline 月刊摘要。2026 年 5 月,多項新的 CSS 功能、事件屬性和 API 新增項目成為 Baseline Newly available,而 CSS 單位、使用者互動屬性和虛擬類別則達到 Baseline Widely available 狀態,此外,開發人員社群也發布了重要更新。
2026 年 CSS 狀態調查
網頁社群的年度脈搏檢查來了:2026 年 CSS 狀態調查現已開放填寫。今年,主辦單位有意識地改進了這項調查,著重於在 AI 輔助編碼時代,對開發人員最重要的功能。瀏覽器供應商會密切監控這些結果,協助他們優先處理工程藍圖,並解決開發人員的痛點。請務必在 7 月 1 日調查結束前,分享您在不斷演進的 CSS 領域中的經驗。
新推出的 Baseline 功能
本節中的功能自 2026 年 5 月起,已在核心瀏覽器集中提供支援,現在已成為 Baseline 新功能。
容器樣式查詢
容器查詢不再僅限於大小。現在您可以使用樣式查詢,根據父項容器的自訂屬性,對元素套用樣式。這樣一來,您就能建構高度模組化的元件,根據情境位置調整主題或樣式,不必依賴複雜的類別結構。
詳情請參閱 @container 的 MDN 參考頁面。
:open 虛擬類別
先前,如要為具有開啟和關閉狀態的樣式元素 (例如 <dialog> 和 <details>) 設定樣式,必須檢查屬性或管理類別。:open 虛擬類別會簡化這項作業,只在這些元素目前處於開啟狀態時進行比對,讓 CSS 更簡潔且更具聲明性。
詳情請參閱 :open 虛擬類別的 MDN 頁面。
ToggleEvent.source
使用 Popover API 時,對狀態變更做出反應至關重要。ToggleEvent 介面的 source 屬性會傳回觸發浮動視窗切換動作的控制項元素。這可讓您識別事件的來源,並協調複雜的 UI 互動。
詳情請參閱 MDN 說明文件中的 ToggleEvent.source。
image-rendering 資源
image-rendering CSS 屬性可讓您控管圖片大小調整時使用的縮放演算法。這項屬性特別適合用於像素畫、低解析度圖片或 QR code,因為這些圖片必須避免模糊的內插類型,並保持清晰的縮放和像素化。
如要瞭解如何使用,請參閱 MDN 圖片顯示頁面。
text-decoration-skip-ink: all
通過降部的底線有時會顯得雜亂。text-decoration-skip-ink: auto 只會在相交時略過墨水,但設為 all 時,底線會強制略過所有字元,無論是否相交,讓您更精準地控制字體美學。
詳情請參閱 MDN 關於 text-decoration-skip-ink 的指南。
SharedWorker
SharedWorker API 提供專用的背景工作人員,可從多個瀏覽環境存取,例如相同來源的不同視窗、分頁或 iframe。這項功能非常適合跨分頁界線共用狀態、管理連線或協調背景工作。
普遍可用的 Baseline 功能
下列功能已廣泛支援 Baseline,也就是說,這些功能現在已普遍相容,可在專案中使用。
lh 長度單位
lh 相對單位對應於所用元素計算出的行高,因此可更輕鬆地調整元素大小 (例如圖示徽章或背景醒目顯示),完美配合一行文字的高度。
詳情請參閱 MDN 長度單位參考資料。
rlh 長度單位
與 lh 類似,rlh 單位代表行高,但特別是根元素 (<html>) 的行高。這可讓您在整個網頁中建立一致的垂直節奏,無論本機字型大小或行高是否遭到覆寫。
詳情請參閱 MDN 長度單位參考資料。
Navigator.userActivation
許多 Web API (例如影片播放、彈出式視窗或剪貼簿存取權) 都需要使用者互動才能觸發。Navigator.userActivation 屬性會傳回物件,其中包含使用者在視窗上的目前和歷來啟用狀態資訊,讓指令碼驗證是否發生使用者手勢。
如要瞭解如何使用,請參閱 Navigator.userActivation 的 MDN 頁面。
clip-path
clip-path CSS 屬性可讓您建立剪裁區域,定義元素應顯示的部分。使用基本形狀 (例如圓形、橢圓形或多邊形) 或 SVG 路徑,即可建立引人入勝的版面配置設計和轉場效果,而不需隱藏溢位。
如需實作詳細資料,請參閱 MDN 頁面的 clip-path。
:user-invalid 虛擬類別
與網頁載入後立即套用樣式的 :invalid 不同 (通常會導致不良的使用者體驗),:user-invalid 虛擬類別只會在使用者與無效表單元素互動後比對。這表示您可以在使用者離開欄位後顯示表單驗證意見回饋。
如要瞭解運作方式,請參閱 MDN 說明文件中的 :user-invalid。
結論
如果我們遺漏了任何與 Baseline 相關的內容,請告訴我們,我們會確保在日後的版本中補上!如有任何問題或想提供有關 Baseline 的意見回饋,請在問題追蹤器中提出問題。