在 Google I/O 大會上，我曾分享過我們去年在 I/O 大會公告後，Baseline 有哪些演變。我也宣布了網路平台資訊主頁、 與 RUM 封存整合，以及即將與 RUMvision 的整合。這篇文章將演講內容的所有資源集中於一處。
網路平台資訊主頁是一項有趣的新方式，能夠讓您檢視整個網路平台，並順利將各項功能轉換成互通性，並納入基準。詳情請參閱推出 Web Platform 資訊主頁。
整合基準與日常使用的工具，一直都是本專案的願景。我們希望您能輕鬆處理瀏覽器相容性問題，讓您不必花太多時間思考。進一步瞭解 RUM Archive 整合，並盡快觀看此空間，掌握更多工具供應商的消息。
第一次使用 Baseline
在 I/O 大會上，我分享了 12 項網路平台功能，這些功能最近已納入 Baseline 推出。這些功能現已在 Chrome、Edge、Firefox 和 Safari 中提供，其中涵蓋可簡化開發程序的小新增項目，以及開發人員最需要的功能，包括容器查詢和 :has()。
大小容器查詢
大小容器查詢可讓您根據容器的寬度或內嵌大小變更設計，而不只是可以透過媒體查詢來指定可視區域的大小。啟用更多可重複使用的元件，這些元件可以在放入版面配置中的可用空間自行修改。而且幾乎是回應式設計的概念，他們一直是最需要的功能清單。
- 這項功能已於 2023 年 2 月推出。
- 將於 2025 年 8 月廣泛推出。
如要進一步瞭解 MDN 的容器查詢，請參閱容器查詢在穩定版瀏覽器中的說明，並瞭解容器查詢個案研究中的其他開發團隊如何從中獲益。
:has()選取器
:has() 選取器介紹了我們多年來的另一個開發人員熱門要求，也就是上層選取器，也就是根據元素的內容選取元素。雖然 :has() 還有許多其他功能。
與容器查詢一樣，這在建立可重複使用的元件時非常有用，因為您可以建立一個能因應其中內容的單一元件。
- 2023 年 12 月新推出。
- 將於 2026 年 6 月正式發布。
如要進一步瞭解 MDN 中的 :has()、:has() 家庭選取器，以及 :has() 個案研究，請參閱相關資訊。
CSS 格線版面配置子網格
Subgrid 可讓巢狀格線版面配置繼承父項的軌跡。這樣有助於在巢狀格線中更好地對齊項目。
- 2023 年 12 月新推出。
- 將於 2026 年 6 月正式發布。
進一步瞭解 MDN 和 CSS 子網格，後者可連結至大量其他資源。
CSS 巢狀結構
近年來，CSS 從開發人員在預先處理工具 (如 Sass) 中使用的功能汲取靈感。舉例來說，CSS 自訂屬性 (通常稱為 CSS 變數) 是廣泛使用的功能，可讓您集中設定顏色等變數，並在整個 CSS 中使用，以往只有在使用預先處理工具時才能使用這類變數。
巢狀處理器的另一個功能是巢狀結構。巢狀結構有助於避免重複的選取器，並提升 CSS 的可讀性，因為相關項目可以更輕易地分組。
- 2023 年 8 月新推出
- 將於 2026 年 2 月開放使用
進一步瞭解 MDN 中的 CSS 巢狀結構和 CSS 巢狀結構。
HTML <search> 元素
搜尋會出現在許多網站和應用程式上，但直到最近為止，沒有任何元素用於標記用於搜尋或篩選網頁的功能。<search> 元素是專為此目的而設計。它是以元素的形式存在，您可以在其中放置搜尋表單，或其他用於篩選結果的元素。
- 2023 年 10 月重新推出
- 2026 年 4 月將正式發布
進一步瞭解 MDN 中的 <search> 元素。
回應式影片
這項功能是指在 <video> 元素中使用 <source> 元素，即可按照提供不同尺寸圖片的方式，向不同裝置提供適當大小的影片。
- 2023 年 11 月新推出
- 將於 2026 年 5 月廣泛推出
如要進一步瞭解 MDN，請參閱「媒體或圖片來源元素」，以及「如何使用回應式影片」。
inert 屬性
插入元素時，無法與元素互動。舉例來說，開啟對話方塊背後的對話方塊元素時，您無法點選或按下 Tab 鍵瀏覽至該元素。插入屬性可讓您控管 UI 任何部分的宣告。
將 inert 屬性套用至元素時，如果點選元素時不會觸發點擊事件，該元素無法取得焦點，且元素及其內容會從無障礙技術中隱藏，因為這類屬性已從無障礙樹狀結構中排除。
- 2023 年 4 月新推出
- 2025 年 10 月將正式發布
進一步瞭解如何在 MDN 上進行宣告，以及斷言屬性。
color-mix() 函式
color-mix() 函式可在任何可用的色域中將一種顏色混合使用，這包括最近加入 Baseline Newly 中的所有新色彩模型：LCH、Lab、OKLCH 和 OKLab。
- 2023 年 4 月新推出
- 2025 年 10 月將正式發布
進一步瞭解 MDN 中的 color-mix() 和 CSS color-mix()。此外，我們也準備了龐大的高畫質 CSS 色彩指南，說明 CSS 提供的所有全新色彩模型。此外，也建議您使用 gradient.style 玩新的顏色，也可以創造出漂亮的漸層。
:user-valid和:user-invalid
虛擬類別 :valid 和 :invalid 可廣泛使用於瀏覽器，且會指出表單元素目前是否有效，而依據所列的任何限制規則。因此，如果您的欄位類型為電子郵件地址，且包含名稱，:invalid 虛擬類別會選取該欄位，而您可以新增顏色或圖示，表明欄位需要修正。
:valid 和 :invalid 虛擬類別的問題在於，這些類別會在使用者與表單互動之前套用。因此，如果表單元素為必要項目，且使用者尚未完成，系統會顯示無效的樣式。一般來說，您只想在使用者輸入錯誤內容或略過欄位內容並留白後，才顯示無效的樣式。
如要在這種情況下改善使用者體驗，請使用 :user-valid 和 :user-invalid 虛擬類別。上述行為的運作方式大致相同，只不過只有在使用者與欄位互動時才會比對結果。因此，在必填欄位範例中，使用者必須用 Tab 鍵瀏覽至欄位，或點選該欄位，然後就直接移動而沒有完成欄位，該欄位才會顯示無效狀態。
- 2023 年 10 月重新推出
- 2026 年 4 月將正式發布
進一步瞭解 :user-valid 和 MDN 的 :user-invalid。
壓縮串流
許多網頁應用程式都必須以壓縮格式 (例如 ZIP 檔案) 為使用者提供下載內容。過去，應用程式需要加入壓縮程式庫，也就是能夠增加所有使用者的應用程式大小的程式碼。Compression Streams API 提供內建的資料串流功能。
- 2023 年 5 月新推出
- 將於 2025 年 11 月廣泛推出
進一步瞭解 MDN 中的 Compression Streams API，以及「所有瀏覽器現在均支援壓縮串流」一文。
宣告式陰影 DOM
宣告式陰影 DOM 是一種從 HTML 建立陰影樹狀結構的新方式，先前您只能使用 attachShadow() 透過 JavaScript 建立陰影樹狀結構。透過 HTML 執行這個動作特別在 JavaScript 可能無法執行環境 (例如電子郵件用戶端) 的情況下特別實用。這對於伺服器端轉譯網路元件也很重要。
- 2024 年 2 月新推出
- 2026 年 8 月將廣泛推出
進一步瞭解宣告式陰影 DOM。
Popover API
彈出式視窗可在網路應用程式中進行許多不同的工作。例如選單、自訂浮動式訊息通知和內容挑選器。現在提供內建方式，可透過 Popover API 以裝飾方式建立這類彈出式視窗。
- 2024 年 4 月新推出
- 2026 年 10 月將正式發布
進一步瞭解 MDN 中的 Popover API、Popover API 導入基準，以及 Popover 個案研究。
這 12 項功能只是納入基準新上線的部分項目，歡迎透過本網站探索更多功能。探索 2023 年基準所有已推出的功能，並探索 2024 年基準中日益增加的特徵集合。