在 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 年基準中日益增加的特徵集合。