隨著今年進入下半年,是時候來看看 Interop 2024 如何改善今年的網頁互通性。
我們的起點
今年初,Chrome 實驗版瀏覽器的支援分數為 83 分。
目前的分數為 90,穩定版瀏覽器的分數則是 85,這是在 6 月發布 Chrome 126 後的結果。整體實驗性互通分數提高了 10 分,這篇文章將分享一些有助於提升分數的功能。
彈出式視窗
彈出式視窗已於 2024 年 4 月成為「新推出」基準的一部分。彈出式視窗很有趣,因為您需要建構的許多 UI 功能,例如選單、工具提示、用於選取的疊加層,以及教學 UI,都是彈出式視窗的一種。在彈出式視窗推出前,建立任何這類功能都需要大量自訂程式碼。程式碼可確保不會一次開啟多個元素,或在使用者按一下元素外部時啟用輕量式關閉功能。您也可能會遇到 z-index
的問題,無法確保 UI 元素會顯示在介面其他元素之上。
Popover API 包含所有這些功能和更多功能,可節省開發時間,並協助您建立效能更高且更易於存取的介面。舉例來說,下列程式碼會建立具有輕型關閉功能的彈出式視窗,當您開啟時,系統會自動關閉其他彈出式視窗。
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>
如要進一步瞭解,請參閱「Popover API 在 Baseline 中上線」一文。許多應用程式都已體驗到 Popover 的優點。Tokopedia 善用這項功能,在非支援的瀏覽器上使用 polyfill,因此大幅減少 React 程式碼的數量。
使用 @property
的進階自訂屬性
@property
CSS 規則可讓您建立進階自訂屬性,提供比標準自訂屬性更詳細的名稱和值。設定允許的語法,定義此屬性可保留的資料類型,例如顏色、數字或長度。接著設定屬性是否會繼承,以及初始值。
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
@property
規則目前可改善 Firefox 的實驗分數,並在 Firefox 128 於本月稍晚推出時提升穩定分數。並與「Baseline Newly Available」彙整。
如要進一步瞭解,請參閱「@property:為 CSS 變數提供超能力」。
font-size-adjust
屬性
您可以使用 CSS font-size-adjust
屬性,修改小寫字母相對於大寫字母的大小。這在可能發生字型備用情況的情況下特別實用,因為這有助於確保備用字型仍可讀取,尤其是在字型大小較小的情況下。
font-size-adjust
屬性目前已納入 Chrome 實驗分數,但在本月推出的 Chrome 127 時,這項屬性會提高穩定分數。並加入「新推出」基準。
text-wrap: balance
使用 text-wrap: balance
可指示瀏覽器找出文字的最佳平衡換行方式。這項功能特別適合用於標題,例如可避免標題在第二行中以單字結尾。
Safari 最近已開始支援這項功能,其他瀏覽器也正在努力修正失敗的測試,確保這項功能可在所有瀏覽器上正常運作。
除了這些主要功能可互通外,我們也改善了許多其他功能。每項通過的測試都代表您不會遇到的互通性問題。我們很期待在年底前看到這個分數能達到 100%。