Interop 2024 為 Baseline 提供更多功能

發布日期:2025 年 1 月 22 日

隨著 Interop 2024 即將落幕,這篇文章將回顧這項專案有史以來最成功的一年。最後,所有實驗性瀏覽器的評分都達到 99 分,穩定版也差不多。這表示許多功能現在已可使用 Baseline Newly。

所有分數為 99 的瀏覽器。
Interop 2024 資訊主頁 (截至 2025 年 1 月 22 日)

更多 Baseline 功能

功能必須具備互通性,才能成為新基準功能。因此,Interop 2024 協助許多功能超越該界線,並納入 Baseline 2024,這一點一點也不令人意外。

已註冊的自訂屬性

@property 規則和 CSS.registerProperty() 靜態方法已於 2024 年 7 月成為新版基準。

font-size-adjust 屬性

無論使用的字型為何,font-size-adjust CSS 屬性都會根據特定指標 (例如 x-height) 將字型縮放至相同大小,藉此保留明顯的文字大小。這有助於讓備用字型看起來同樣大小。2024 年 7 月起,這項功能成為 Baseline 新功能。

<video>requestVideoFrameCallback() 方法

<video>requestVideoFrameCallback() 方法會排定與下一個影片影格一起執行的函式。這項屬性類似 requestAnimationFrame(),但適用於影片,並於 2024 年 10 月推出。

使用 scrollbar-widthscrollbar-gutter 設定捲軸樣式

scrollbar-width CSS 屬性可設定捲軸的寬度,而 scrollbar-gutter 則可為捲軸保留空間,避免捲軸出現和消失時造成不必要的版面配置變更。這些功能已於 2024 年 12 月納入基準新功能。

transition-behavior 屬性

transition-behavior: allow-discrete CSS 宣告可讓屬性進行轉換,這些屬性的動畫行為是離散的。這類屬性無法插補,且無法從 50% 的起始值切換至結束值。這項資源於 2024 年 8 月成為基準新資源。

text-wrap: balance

text-wrap CSS 屬性會設定溢出容器的文字中斷行方式。這是 text-wrap-styletext-wrap-mode 的簡寫。balance 值可讓您建立平衡的廣告標題和其他短文。text-wrap 資源於 2024 年 3 月成為基準新資源。

彈出式視窗

彈出式視窗可讓您使用 HTML 或 showPopover() 方法,以宣告式方式建立疊加層。它幾乎達到「新版可用」基準,我們一開始也認為它達到這個標準,但 Safari 實作方式出現問題,因此並未達到 2024 年的「新版可用」標準。好消息是,我們已在目前的 Safari Beta 18.3 中修正這項問題,因此很快就能正確宣告 Popover 為新版基準。

修正基準功能

Interop 2024 中包含的功能已歸類為「新版基準」,這項工作旨在修正實作中的部分小差異。這些問題可能很少有人遇到,但如果您遇到了,這些小問題就會造成很大的影響。

CSS 巢狀結構

CSS 巢狀結構可讓您使用較短的選擇器,讓讀者更容易閱讀,並透過在其他規則中巢狀結構,讓程式碼更具模組化。這項功能已於 2023 年 12 月成為「Baseline Newly」功能,並納入 Interop 2024 以修正一些未解決的互通性問題。

宣告式 Shadow DOM

<template> 上的 shadowrootmode 屬性會在不使用 JavaScript 的情況下建立陰影根目錄。這是 `attachShadow()` 方法的陳述式替代方案。

Interop 2025 即將推出

我們目前正在為 Interop 2025 完成提案,並期待在去年的基礎上再創佳績。請留意 2 月的公告,瞭解相關內容。如要瞭解 Baseline 的最新功能,請前往 web.dev 查看一系列Baseline 新推出的功能